Webpack打包

安装webpack

执行如下命令

npm install webpack webpack-cli

配置webpack

项目根目录中创建 webpack.config.js 配置文件：

• 配置入口entry(所需打包的文件路径)
• 配置出口output

(1)path指文件打包后的存放路径
(2)path.resolve()方法将路径或路径片段的序列处理成绝对路径
(3)__dirname 表示当前文件所在的目录的绝对路径
(4)filename是打包后文件的名称

配置webpack-dev-server

安装webpack-dev-server

npm install --save-dev webpack-dev-server

配置webpack.config.js文件

devServer:{undefined

  contentBase:'./build, //设置服务器访问的基本目录

  host:'localhost', //服务器的ip地址

  port:8080, //端口

  open:true //自动打开页面

}

安装loader

安装style-loader和css-loader

npm install style-loader css-loader --save-dev

配置loader

在webpack.config.js文件里配置module中的rules

在 webpack 的配置中 loader 有两个：

test 属性:用于标识出应该被对应的 loader 进行转换的某个或某些文件。

use 属性:表示进行转换时，使用哪个 loader。

自动清理 dist 目录下的旧文件

安装 clean-webpack-plugin 插件

npm install clean-webpack-plugin@3.0.0 -D

在 webpack.config.js 文件中进行配置：

const { CleanWebpackPlugin } = require('clean-webpack-plugin')
plugins: [htmlPlugin, new CleanWebpackPlugin()]

抽离和压缩CSS

在多数环境下压缩CSS可以在生产环境中节省加载时间，同时可以将css文件抽离成一个单独的文件

需要在终端输入npm install mini-css-extract --save-dev

//在webpack.config.js进行配置
rules:[{
test:/\.css$/i,
use:['MiniCssExtractPlugin.loader','css-loader']
}]

可以自己设定文件名，如下所示

new MiniCssExtractPlugin({
filename:'styles/[contenthash].css'
})

对图片进行打包

（把图片生成到 image 目录）

修改 webpack.config.js 中的 url-loader 配置项，新增 outputPath 选项指定图片文件的输出路径：

{
  test: /\.jpg|png|gif$/,
  use: {
    loader: 'url-loader',
    options: {
      limit: 23333,
      outputPath: 'image' // 指明生成的图片存到 dist 目录下的 image 子目录中
    }
  }
}