webpack配置 | 易学教程

一、webpack配置

初始化npm和安装webpack

npm init -y //-y表示默认配置 npm install -g webpack webpack-cli //-g 表示全局安装 如果要使用命令行就要全局安装   -D表示安装在本地

创建webpack.config.js

　　相关配置参数：

Entry: 入口
Module:模块，webpack中一切皆是模块
Chunk:代码库，一个chunk由十多个模块组合而成，用于代码合并与分割
Loader:模块转换器，用于把模块原内容按照需求转换成新内容
Plugin:扩展插件
Output: 输出结果

const path = require('path');  module.exports = {     entry: path.resolve(__dirname, 'src/index.js'), //__dirname 是本地目录的绝对路径 path.resolve返回的结果把两个路径参数进行了拼接     output: {         path: path.resolve(__dirname, 'dist'), //输出的文件路径         filename: 'bundle.js',  //输出的主文件的文件名         publicPath: '/'  //上线时配置的是cdn的地址     } }

二、HTML模板

html-webpack-plugin 可以指定template模板文件，将会在output目录下，生成html文件，并引入打包后的js

安装

npm install -D html-webpack-plugin

在webpack.config.js中引入

const HtmlWebpackPlugin = require('html-webpack-plugin');

const path = require('path');

module.exports = {

   entry: path.resolve(__dirname, 'src/index.js'), //__dirname 是本地目录的绝对路径 path.resolve返回的结果把两个路径参数进行了拼接     output: {         path: path.resolve(__dirname, 'dist'), //输出的文件路径         filename: 'bundle.js',  //输出的主文件的文件名         publicPath: '/'  //上线时配置的是cdn的地址     }

  plugins: [ new HtmlWebpackPlugin({ 　　　　　　　　template: path.resolve(__dirname, 'src/index.html')  //以当前的html文件为模板作为展示　　　　　　　}) ] }

三、配置 webpack-dev-server

webpack-dev-server提供了一个简单的Web服务器和实时热更新的能力

安装

npm install -D webpack-dev-server

在 webpack.config.js 增加 devServer 配置:

const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = {     //...other code     devServer: {         contentBase: './dist',         port: '8080',         host: 'localhost'     } }

在 package.json 的 scripts 字段中增加:

 "scripts": {     "dev": "webpack-dev-server --mode development"   }

四、加载css

通过使用 style-loader 和 css-loader, 可以将 css 文件转换成JS文件类型。

npm install -D style-loader css-loader

在webpack.config.js中加入module

module.exports = {     //other code     module: {         rules: [             {                 test: /\.css/,                 use: ['style-loader', 'css-loader'],  //注意顺序，从右向左开始转化   use里的loader也可以以对象的形式进行配置　　　　　　　　                 exclude: /node_modules/,  //不要处理的路径                 include: path.resolve(__dirname, 'src') //要处理的路径             }         ]     } }

　　配置参数：

test: 匹配处理文件的扩展名的正则表达式
use: loader名称
include/exclude: 手动指定必须处理的文件夹或屏蔽不需要处理的文件夹
query: 为loader提供额外的设置选项

五、加载图片

file-loader: 解决CSS等文件中的引入图片路径问题
url-loader: 当图片小于limit的时候会把图片Base64编码，大于limit参数的时候使用file-loader进行拷贝

安装

npm install -D url-loader file-loader

在 webpack.config.js 中增加 loader 的配置(增加在 module.rules 的数组中)。

module.exports = {     //other code     module: {         rules: [             {                 test: /\.(gif|jpg|png|bmp|eot|woff|woff2|ttf|svg)/,                 use: [                     {                         loader: 'url-loader',                         options: {                             limit: 8192,                             outputPath: 'images'                         }                     }                 ]             }         ]     } }

六、编译less和sass

安装

npm install -D less less-loader npm install -D node-sass sass-loader

在webpack.config.js添加配置

module.exports = {     //other code     module: {         rules: [             {                 test: /\.less/,                 use: ['style-loader', 'css-loader', 'less-loader'],                 exclude: /node_modules/,                 include: path.resolve(__dirname, 'src')             },             {                 test: /\.scss/,                 use: ['style-loader', 'css-loader', 'sass-loader'],                 exclude: /node_modules/,                 include: path.resolve(__dirname, 'src')             }         ]     } }

七、转义 ES6/ES7/JSX

npm install -D @babel/core babel-loader @babel/preset-env @babel/preset-react @babel/plugin-proposal-decorators @babel/plugin-proposal-object-rest-spread

添加配置

module.exports = {     //other code     module: {         rules: [             {                 test: /\.jsx?$/,                 use: [                     {                         loader: 'babel-loader',                         options: {                             presets: ['@babel/preset-env', '@babel/react'],                             plugins: [                                 ["@babel/plugin-proposal-decorators", { "legacy": true }] //装饰器                             ]                         }                     }                 ],                 include: path.resolve(__dirname, 'src'),                 exclude: /node_modules/             },         ]     } }

八、压缩JS文件

安装

npm install -D uglifyjs-webpack-plugin

添加配置

const UglifyWebpackPlugin = require('uglifyjs-webpack-plugin');  module.exports = {     //other code     optimization: {         minimizer: [             new UglifyWebpackPlugin({                 parallel: 4             })         ]     } }

九、分离css

安装

npm install -D mini-css-extract-plugin

配置把style-loader 换成插件loader

const MiniCssExtractPlugin = require('mini-css-extract-plugin');  module.exports = {     //other code     module: {         rules: [             {                 test: /\.css/,                 use: [{ loader: MiniCssExtractPlugin.loader}, 'css-loader'],                 exclude: /node_modules/,                 include: path.resolve(__dirname, 'src')             },             {                 test: /\.less/,                 use: [{ loader: MiniCssExtractPlugin.loader }, 'css-loader', 'less-loader'],                 exclude: /node_modules/,                 include: path.resolve(__dirname, 'src')             },             {                 test: /\.scss/,                 use: [{ loader: MiniCssExtractPlugin.loader }, 'css-loader', 'sass-loader'],                 exclude: /node_modules/,                 include: path.resolve(__dirname, 'src')             },         ]     },     plugins: [         new MiniCssExtractPlugin({             filename: 'css/[name].css'         })     ] }

十、压缩CSS文件

安装

npm install --save-dev optimize-css-assets-webpack-plugin

添加配置

const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');  module.exports = {     //other code     optimization: {         minimizer: [             new OptimizeCssAssetsWebpackPlugin()         ]     } }

webpack.config.js文件:

const path = require('path'); const htmlWebpackPlugin = require('html-webpack-plugin'); const UglifyWebpackPlugin = require('uglifyjs-webpack-plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const CleanWebpackPlugin = require('clean-webpack-plugin'); const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin'); module.exports = {     entry: path.resolve(__dirname, 'src/index.js'),     output: {         path: path.resolve(__dirname, 'dist'),         filename: 'bundle.js',         publicPath: '/'     },     devServer: {         contentBase: './dist',         port: '8080',         host: 'localhost'     },     module: {         rules: [             {                 test: /\.jsx?$/,                 use: [                     {                         loader: 'babel-loader',                         options: {                             presets: ['@babel/preset-env', '@babel/react'],                             plugins: [                                 ["@babel/plugin-proposal-decorators", { "legacy": true }]                             ]                         }                     }                 ],                 include: path.resolve(__dirname, 'src'),                 exclude: /node_modules/             },             {                 test: /\.css/,                 use: [{ loader: MiniCssExtractPlugin.loader}, 'css-loader'],                 exclude: /node_modules/,                 include: path.resolve(__dirname, 'src')             },             {                 test: /\.less/,                 use: [{ loader: MiniCssExtractPlugin.loader }, 'css-loader', 'less-loader'],                 exclude: /node_modules/,                 include: path.resolve(__dirname, 'src')             },             {                 test: /\.scss/,                 use: [{ loader: MiniCssExtractPlugin.loader }, 'css-loader', 'sass-loader'],                 exclude: /node_modules/,                 include: path.resolve(__dirname, 'src')             },             {                 test: /\.(gif|jpg|png|bmp|eot|woff|woff2|ttf|svg)/,                 use: [                     {                         loader: 'url-loader',                         options: {                             limit: 1024,                             outputPath: 'images'                         }                     }                 ]             }         ]     },     optimization: {         minimizer: [             new UglifyWebpackPlugin({                 parallel: 4             }),             new OptimizeCssAssetsWebpackPlugin()         ]     },     plugins: [         new htmlWebpackPlugin({             template: path.resolve(__dirname, 'src/index.html'),         }),         new MiniCssExtractPlugin({             filename: 'css/[name].css'         }),         new CleanWebpackPlugin()     ] }

标签

Webpack

test

babel

require

node

const

css