webpack的安装以及配置

安装基本依赖（4.0版本）

webpack项目的两个核心基础模块是webpack和webpack-cli，这是webpack项目构建的前提

npm i webpack webpack-cli -D

运行webpack（打包文件）

webpack 入口文件路径 输出文件路径

webpack  src/js/main/js  dist/bundle.js

此时首页引用的main.js文件要修改为bundle.js文件，引用的路径是需要修改的

使用webpack配置文件（webpack.config.js）简化打包命令

运行webpack命令的时候，webpack需要指定文件入口文件和输出文件的路径，所以，我们需要在webpack.config.js中配置这两个路径

//导入处理路径的模块
const path=require("path");
//暴露一个配置对象，将来，webpack在启动的时候会默认来查找webpack.config.js，
//并读取这个文件中导出的配置对象，来进行打包处理
moudule.exports={
	entry:path.join(__dirname,"src/js/main"),//项目入口文件
	output:{
		path:path.join(__dirname,"dist"),//配置输出路径
		filename:“bundle.js”//配置输出文件的文件名
	}
}

实现webpack的实时打包构建

由于每次重新修改代码之后，都需要手动运行webpack打包敏玲，比较麻烦，所以使用webpack-dev-server来实现代码实时打包编译，当修改代码之后，会自动安装打包构建
安装webpack-dev-server包

 cnpm i webpack-dev-server -D

package.json文件中的配置
在scripts节点下新增"dev"

"scripts":{
	"dev":"webpack-dev-server --open  --port 3000 --contentBase src  --hot"
}

–open 自动打开浏览器
–port 3000 指定端口号
–contentBase src 指定托管的根目录
–hot 启动热更新（在修改代码后不用刷新整个页面就能更改修改部分的界面）

注意事项：实现实时打包后，bundle.js文件会保存在内存中，而此时index.html引用的bundle.js文件是根目录下的bundle.js文件，所以引用的路径是需要修改成根目录下的bundle.js，如果不修改，则修改代码后，页面不会更新

<script src="bundle.js"></script>

使用html-webpack-plugin插件配置启动页面

由于使员工–contentBase src 指令的过程比较繁琐，需要指定启动的目录，同时还需要修改index.html中script标签的src属性，所以我们可以使用html-webpack-plugin插件配置启动页面

1. 安装

cnpm i html-webpack-plugin -D

2. 设置webpack.config.js配置文件

//导入处理路径的模块
const path=require("path");
//导入自动生成HTML文件的插件
const htmlwebpackplugin=require("html-webpack-plugin");
module.exports={
	entry:path.join(__dirname,"src/js/main.js"),//项目入口文件
	output:{//配置输出选项
		path:path.join(__dirname,"dist"),//配置输出的路径
		filename:"bundle.js"//配置输出的文件名
	}
	plugins:[//添加plugins节点配置插件
		new htmlwebpackplugin({
			temlate:path.join(__dirname,"src/index.html"),//模板路径
			filename:"index.html"//自动生成的HTML文件的名称
		})
	]
}

3. 将index.html中的script标签注释掉，因为html-webpack-plugin插件会自动把bundle.js注入到index.html页面中

使用webpack打包css文件

1. 在main.js中导入css文件（使用es6语法：import）

import "./src/index.css"

2. 安装 style-loader和css-loader

cnpm i style-loader css-loader -D

3. 修改webpack.config.js配置文件，在module.exports暴露的对象中添加module节点

module:{//用来配置第三方loader模块的
	rules:[//文件的匹配规则
		{test:/\.css$/,use:["style-loader","css-loader"]}//处理css文件的规则
	]
}

4. use表示使用哪些模块数理test所匹配到的文件；use中相关的loader模块调用的顺序是从后往前调用的；

使用webpack打包less文件

1. 在main.js中导入css文件（使用es6语法：import）

import "./src/less.css"

2. 安装 less-loader和less

cnpm i less-loader less -D

3. 修改webpack.config.js配置文件

module:{//用来配置第三方loader模块的
	rules:[//文件的匹配规则
		{test:/\.css$/,use:["style-loader","css-loader"]},//处理css文件的规则
		{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }//处理less文件的规则
	]
}

使用webpack打包sass文件

1. 在main.js中导入css文件（使用es6语法：import）

import "./src/sass.css"

2. 安装 sass-loader和node-sass

cnpm i sass-loader node-sass -D

3. 修改webpack.config.js配置文件

module:{//用来配置第三方loader模块的
	rules:[//文件的匹配规则
		{test:/\.css$/,use:["style-loader","css-loader"]},//处理css文件的规则
		{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },//处理less文件的规则
		{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }//处理sass文件的规则
	]
}

使用webpack处理css中的路径

1. 安装url-loader和file-loader

cnpm i url-loader file-loader -D

2. 在webpack-config-js中添加处理url路径的loader模块

{test:\./(png|jpg|gif)$\,use:"url-loader"}

3. 可以通过limit指定进行base64编码的图片大小；只有小于字节的图片才会进行base64编码

{test:\./(png|jpg|gif)$\,use:"url-loader?limit=50000"},

使用babel处理高级JS语法

1. 安装babel的相关loader包

cnpm i babel-core babel-loader@7 babel-plugin-transform-runtime –D

2. 安装babel转换的语法

cnpm i babel-preset-es2015 babel-preset-stage-0 --save-dev

3. 在webpack.config.js中添加相关loader模块，其中需要注意的是，一定要把node_modules文件夹添加到排除项：

    { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }

4. 在项目根目录中添加.babelrc文件，并修改这个配置文件如下：

    {
        "presets":["es2015", "stage-0"],
        "plugins":["transform-runtime"]
    }

5. 注意：语法插件babel-preset-es2015可以更新为babel-preset-env，它包含了所有的ES相关的语法；

webpack4.0相关教程

webpack4.0