当前位置：主页 > 前端开发

webpack构建前端项目-docker构建前端项目

发布时间：2023-02-09 07:03 浏览次数：次作者：佚名

webpack的基本使用

webpack是一款流行的前端项目构建工具（打包工具），可以解决目前web开发中浏览器与JS不兼容的问题

注意：使用webpack前需要提前安装好node.js。这个非常重要。中间有很多大坑，都是版本问题造成的。我是win7系统，安装不了太高的版本，你安装对应的就行了

一、webpack初体验

这里我基于一个简单的项目使用

索引.html


<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		<script src="./index.js" type="text/javascript" charset="utf-8">script>
	head>
	<body>
		<ul>
			<li>1li>
			<li>2li>
			<li>3li>
			<li>4li>
			<li>5li>
			<li>6li>
			<li>7li>
			<li>8li>
			<li>9li>
		ul>
	body>
html>

索引.js

import $ from 'jquery'
$(function(){
	$('li:odd').css('backgroundColor','pink')
	$('li:even').css('backgroundColor','lightblue')
})

直接运行浏览器，发现报错。原因是浏览器不支持ES6语法导入。这时候就需要使用webpack重新打包项目，将代码重新编译成浏览器可以识别的js代码。

module.exports = {
	mode:'development' 
}

 "scripts": {
	"dev":"webpack"
  }

命令运行后，发现项目中多了一个dist目录，下面多了一个main.js文件，然后重新将main.js引入到index.html中

ok，访问首页，没有报错，说明webpack打包成功

2.配置打包进出

4.x版本的webpack默认规定：

如果需要修改打包的入口和出口，可以在webpack.config.js中添加如下配置信息

const path = require('path')
module.exports = {
	mode:'development',   /* __dirname表示当前文件所在的目录*/
	entry:path.join(__dirname,'./src/index.js'), //打包入口
	output:{
		path:path.join(__dirname,'./dist'),//输出文件的存放路径
		filename:'bundle.js' //输出文件的名称
	}
}

ok，可以在index.html中导入bundle.js，访问成功

3、配置webpack的自动打包功能

为什么要配置自动打包功能？我们再想象这样一个场景，就是现在我们的项目已经打包成功了，但是需求变了。这个时候我们已经修改了代码，但是访问页面的代码并没有生效，需要重新打包才能生效。所以这个时候我们就需要配置自动打包功能

"scripts":{
    "dev":"webpack-dev-server" //script节点下的脚本，可以通过npm run执行
}

发现只要保存，页面就会变化

注意

四、配置html-webpack-plugin生成浏览页面

项目打包后，访问：8080为首页，无需点击src

//导入生成蓝柳页面的插件，得到一个构造函数
const HtmlWebpackPlugin = require('html-webpack-plugin')
//创建插件的实例对象
const htmlPlugin = new HtmlWebpackPlugin({
	template:'./src/index.html', //指定要用到的模板文件
	filename:'index.html'// 指定生成的文件的名称，该文件存在于内存中，在目录中不显示
})

plugins:[htmlPlugin] //plugins数组是webpack打包期间会用到的一些插件列表

webpack.config.js 总文件

const path = require('path')
//导入生成蓝柳页面的插件，得到一个构造函数
const HtmlWebpackPlugin = require('html-webpack-plugin')
//创建插件的实例对象
const htmlPlugin = new HtmlWebpackPlugin({
	template:'./src/index.html', //指定要用到的模板文件
	filename:'index.html'// 指定生成的文件的名称，该文件存在于内存中，在目录中不显示
})
module.exports = {
	mode:'development',   /* __dirname表示当前文件所在的目录*/
	entry:path.join(__dirname,'./src/index.js'), //打包入口
	output:{
		path:path.join(__dirname,'./dist'),//输出文件的存放路径
		filename:'bundle.js' //输出文件的名称
	},
	plugins:[htmlPlugin] //plugins数组是webpack打包期间会用到的一些插件列表
}

运行后访问地址直接跳转到首页，配置成功！

5.配置自动打包相关参数

每个项目打包后，需要复制地址才能看到网站的效果。目前的需求是项目打包后自动跳转到首页

//--open 打包完成后自动打开浏览器页面
//--host 配置ip地址
//--port 配置端口
"scripts": {
    "dev": "webpack-dev-server --open --host 127.0.0.1 --port 8888"
  },

六、webpack中的loader 1.通过loader打包非js模块

在实际开发中，webpack默认只能打包处理以.js后缀结尾的模块。其他非js模块默认不能被webpack处理。需要调用loader正常打包，否则会报错

loader加载器可以辅助webpack对特定的文件模块进行打包处理webpack构建前端项目，例如：

loader的调用过程

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8jnCasCG-1607523978684)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20201208220427776.png)]$

2、webpack中loader的基本使用打包和处理css文件

//所有第三方文件模块的匹配规则
//test:表示匹配的正则，在这里的意思是以css结尾的
//use:表示对应要调用的loader
module:{
    rules:[
        {test:/\.css$/,use:['style-loader','css-loader']}
    ]
}

1. CSS

li{
	list-style: none;
}

索引.js

import $ from 'jquery'
import './css/1.css' //在js文件中引入css文件，到时候就会调用loader帮忙打包
$(function(){
	$('li:odd').css('backgroundColor','yellow')
	$('li:even').css('backgroundColor','lightblue')
})

运行npm run dev，成功去掉li标签的圆点

注意

打包和处理更少的文件

module:{
    rules:[
        {test:/\.less$/,use:['style-loader','css-loader','less-loader']}
    ]
}

1.少

body{
	margin: 0;
	padding: 0;
	ul{
		padding: 0;
		margin: 0;
	}
}

索引.js

import $ from 'jquery'
import './css/1.css'
import './css/1.less' //引入less文件
$(function(){
	$('li:odd').css('backgroundColor','yellow')
	$('li:even').css('backgroundColor','lightblue')
})

npm run dev 运行项目，ok 完美！

打包处理scss文件

module:{
    rules:[
        {test:/\.scss$/,use:['style-loader','css-loader','sass-loader']}
    ]
}

同上

配置 postCSS 自动添加 css 兼容前缀

问题是，我们写好css样式并打包后webpack构建前端项目，发现该项目在google等浏览器中是正常的，但是在IE浏览器中就不行了。存在兼容性问题。这时候我们可以配置postCSS来解决兼容性问题。性问题

const autoprefixer = require('autoprefixer') //导入自动添加前缀的插件
module.exports = {
    plugins:['autoprefixer'] //挂载插件
}

module:{
    rules:[
        {test:/\.css$/,use:['style-loader','css-loader','postcss-loader']}
    ]
}

ok，运行npm run dev解决问题

打包样式表中的图像和字体文件

问题：当我们在index.js文件中引入图片路径等资源时，发现项目打包错误，发现缺少对应的loader

ERROR in ./src/images/bg.jpg 1:0
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. S
ee https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)
 @ ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./src/css/1.css 4:0-61 6:73-102
 @ ./src/css/1.css 2:12-132 9:17-24 13:15-29
 @ ./src/index.js 2:0-20

module:{
    rules:[
        {
            test:/\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
            use:'url-loader?limit=16940' //其中？之后是loader的参数项。
        }
    ]
}
//limit是用来指定图片的大小，单位是字节（byte），只有小于limit大小的图片，才会被转化base64图片

npm run dev : 经过测试，好像是limit的值有问题，发现图片的实际大小会转成base64

js文件中封装处理高级语法

在index.js中添加如下内容后，保存并运行npm run dev

//定义一个js的高级语法
class Person{
	static info ='aaa'
}
console.log(Person.info)

错误如下

Uncaught Error: Module parse failed: Unexpected token (13:13)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| //定义一个js的高级语法
| class Person{
> 	static info ='aaa'
| }
| console.log(Person.info)
# 总的意思是说缺少加载器打包js高级语法

配置

module.exports = {
    presets:['@babel/preset-env'],
    plugins:['@babel/plugin-transform-runtime','@babel/plugin-proposal-class-properties']
}

{test:/\.js$/,use:'babel-loader',exclude:/node-modules/}
//exclude为排除项，表示babel-loader不需要处理node_modules中的js文件

运行 npm run dev ok

三、Vue单文件组件传统组件存在的问题及解决方案单文件组件的组成结构

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LinUTxKa-1607523978687)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20201209214500024.png)]$

在 src/component 目录下创建 App.vue 文件

<template>
	<div>
		<h1>这是App根组件</h1>
	</div>
</template>
<script>
	export default{
		data(){
			return {}
		},
		methods::{}
	};
	
</script>
<!-- scoped防止组件之间的样式冲突 -->
<style scoped> 
	h1{
		color: #FF1493;
	}
</style>

在index.js文件中引入上述vue文件

//导入vue的单文件组件
import App from './component/App.vue'

配置好后，启动项目，发现报错，没有合适的loader

在webpack中配置vue组件的loader

const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
    module:{
        rules:[
            // ... 其他的规则
            {test:/\.vue$/,use:'vue-loader'}
        ]
    },
    plugins:[
        new VueLoaderPlugin() //请确保引入这个插件
    ]
}

在 webpack 项目中使用 vue

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8BEsqbtP-1607523978689)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20201209220911094.png)]$

索引.html


<div id="app">div>

配置完成后，运行npm run dev，ok，发现vue的模板渲染成功了！

webpack 打包发布

应用上线前需要通过webpack对应用进行整体打包，打包命令可以通过package.json文件进行配置

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AEymBjMo-1607523978692)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20201209221903316.png)]$

打包之后，dist目录就帮我们重新生成了，首页index.html也生成了，ok！

webpack构建前端项目-新型全ip组网集成式数字电视前端平台的构建

传智播客全栈视频下载-传智播客html5游戏开发视频教程