npm init

npm i webpack webpack-cli -g
npm i webpack webpack-cli -D

webpack 以index.js 入口文件打包,打包后输出到build，整体打包环境是开发环境，如果打包环境是生成环境，把mode=developement 改为 mode=production

webpack ./src/index.js -o ./build/built.js  --mode=development

打包成功后会在我们刚指定的bulid文件夹下面看到打包后的代码，同时在命令行看到打包前的文件比打包后的文件大，说明webpack有压缩j代码。减小文件体积的功能。

练习2， 加载css

webpack 只能识别js 和 json文件，如果要识别css 文件，就要写配置，新建webpack.confing.js. 如下

// 所有构建工具是基于nodejs平台运行的，模块默认使用commmon.js
const {resolve} = require('path')
module.exports={//入口文件，指示webpack以哪个文件开始打包entry:"./src/index.js",output:{//输出的文件名filename:"built.js",//输出路径//__dirname :nodejs 变量，代表当前文件目录的绝对路径path:resolve(__dirname,"build")},//loader的配资module:{//不同文件必须配置不同loader处理rules:[{//匹配哪些文件,正则匹配css文件test:/\.css$/,//使用哪些loaderuse:[//uses数组执行顺序，从下到上依次执行//创建style标签，将js中的样式资源插入进行，添加到head中生效'style-loader',//将css文件变成commmon.js模块加载到js中，里面内容是样式字符串'css-loader']},{test:"/\.less$/",user:["style-loader","css-loader",//将less文件编译成css文件"less-loader"]}]//详细loader配置},//plugins的配置plugins:[],//模式mode:"development",// mode:"production"
}

测试代码

import "./index.css";
function add(x,y){return x+y
}
console.log(add(1,2))

下载css-loader 和style-loader， 这两个都是开发依赖

npm i css-loader style-loader -D

然后在命令行输入"webpack"开始打包，打包成功后如图，可以看到css文件也被打包进去了。

如果要测试刚刚写的js 和 css 代码有没有生效，可在打包后的文件夹build下建一个index.html，然后引入打包过后的文件，再运行，可以看到写的css样式生效

练习3， 压缩html

使用插件压缩html，在src文件夹下新建index.html,任意输入HTML内容,webpack.config.js内容如下

// 所有构建工具是基于nodejs平台运行的，模块默认使用commmon.js
const {resolve} = require('path');
const HtmlWebpack =  require('html-webpack-plugin')
module.exports={//入口文件，指示webpack以哪个文件开始打包entry:"./src/index.js",output:{//输出的文件名filename:"built.js",//输出路径//__dirname :nodejs 变量，代表当前文件目录的绝对路径path:resolve(__dirname,"build")},//loader的配资module:{//不同文件必须配置不同loader处理rules:[{//匹配哪些文件,正则匹配css文件test:/\.css$/,//使用哪些loaderuse:[//uses数组执行顺序，从下到上依次执行//创建style标签，将js中的样式资源插入进行，添加到head中生效'style-loader',//将css文件变成commmon.js模块加载到js中，里面内容是样式字符串'css-loader']}]},//plugins的配置plugins:[new HtmlWebpack()],//模式mode:"development",// mode:"production"
}

需要用html-webpack-plugin压缩HTML, 先下载html-webpack-plugin,然后执行webpack命令，就会在build文件夹下面自动生成一个index.html,

修改plugin后重新打包，这样打包完会将src下面的index.html复制出来

//plugins的配置plugins:[//功能：默认会创建一个空的html文件，引入打包输出的所有资源//需求：需要一个有结构的html.new HtmlWebpack({//复制如下文件，并将它原本的功能并引入打包输出的所有资源template:"./src/index.html"})],

练习4 压缩图片

（1）在src下面建一个index.css ,index.js  ,index.css写一个背景图样式，在index.js中映入index.css做测试

webpack.config.js   loader配置代码如下

//loader的配置module: {//不同文件必须配置不同loader处理rules: [{//匹配哪些文件,正则匹配css文件test: /\.css$/,//使用哪些loaderuse: [//uses数组执行顺序，从下到上依次执行//创建style标签，将js中的样式资源插入进行，添加到head中生效'style-loader',//将css文件变成commmon.js模块加载到js中，里面内容是样式字符串'css-loader']},{//处理图资源test: /\.(png|jpg|gif)$/,//需要下载url-loader 和file-loader ,url-loader 依赖 file-loaderloader: 'url-loader',options:{//图片小于8kb,图片会转为base64//优点：减少请求数量，减轻服务器压力//缺点：转换后的图片体积会更大一些limit:8*1024,}}]},

下载url-loader 和 file-loader后执行webpack，打包完成后会在build文件夹下看到一个带有哈希值的图片，index.css中的arrow.png图片没有生成哈希值的图片，因为刚在webpack配置文件设置小于8k的图片是转为了base64。

（2）src 文件夹下面建一个html文件，html文件中插入img标签并写好图片路径，这个时候用刚那个url-loader是处理不了的，打包后看不到这个图片，需做如下配置

   //loader的配资module: {//不同文件必须配置不同loader处理rules: [{//匹配哪些文件,正则匹配css文件test: /\.css$/,//使用哪些loaderuse: [//uses数组执行顺序，从下到上依次执行//创建style标签，将js中的样式资源插入进行，添加到head中生效'style-loader',//将css文件变成commmon.js模块加载到js中，里面内容是样式字符串'css-loader']},{//默认处理不了html中的图片//处理图资源test: /\.(png|jpg|gif)$/,//需要下载url-loader 和file-loader ,url-loader 依赖 file-loader//url-loader:处理样式中的图片路径loader: 'url-loader',options:{//图片小于8kb,图片会转为base64//优点：减少请求数量，减轻服务器压力//缺点：转换后的图片体积会更大一些limit:8*1024,},//给图片进行重命名//[hash:10] 取图片的hash的前10位//[ext]取文件原来的扩展名name:'[hash:10].[ext]'},{test:/\html$/,//处理html文件中的图片文件（负责引入img,从而能被url-loader进行处理）loader:"html-loader"}]},

下载html-loader后再执行webpack.即可