webpack实践 | 8月更文挑战

这是我参与8月更文挑战的第6天，活动详情查看：8月更文挑战

安装：

//初始化
npm init -y //初始化npm配置⽂件
npm install --save-dev webpack //安装核⼼库
npm install --save-dev webpack-cli //安装命令⾏⼯具
复制代码

在使用过程当中npm比较慢，你们能够把npm源设置为淘宝镜像源，执行命令：

npm config set registry https://registry.npm.taobao.org
复制代码

可是若是其余同事没有设置这个，或者并不知道如何设置，咱们能够添加一个文件，自动设置

//在根目录建立 .npmrc ⽂件
touch .npmrc
//在该⽂件内输⼊配置
registry=https://registry.npm.taobao.org/
复制代码

建立src目录和入口文件，建立webpack配置文件（默认配置）

//webpack.config.js
const path = require("path");
module.exports = {
     entry: "./src/index.js",
     output: {
         path: path.resolve(__dirname, "./dist"),
         filename: "[name].js",
     },
     mode: "development",
};
复制代码

样式处理

       集成css样式处理：css-loader-style-loader，并建立index.css

//安装
npm install style-loader css-loader -D
//配置
module: {
     rules: [
         {
             test: /\.css$/,
             use: ["style-loader", "css-loader"],
         },
     ],
}
复制代码

集成Less sass

//安装
//sass
npm install node-sass sass-loader -D
//less
npm install less less-loader -D
//配置
rules:[
    {
         test: /\.scss$/,
         use: ["style-loader","css-loader","sass-loader"]
     },
     {
         test: /\.less$/,
         use: ["style-loader","css-loader","less-loader""]
     }
]
复制代码

样式文件分离

       通过前面两个loader的处理，css最终是打包在js中的，运行时会动态插入head中可是在生产环境会把css文件分离出来，有利于客户端缓存，并行加载及减小js包的大小，因此能够使用mini-cssextract-plugin插件（经常使用于生产环境）

//安装
npm install mini-css-extract-plugin -D
//使⽤
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
     module: {
     rules: [
        {
             test: /\.less$/,
             use: [
                 // 插件须要参与模块解析，须在此设置此项，再也不须要style-loader
                 {
                     loader: MiniCssExtractPlugin.loader,
                     options: {
                         hmr: true, // 模块热替换，仅需在开发环境开启
                         // reloadAll: true,
                         // ... 其余配置
                     }
                 },
                 'css-loader',
                 'postcss-loader',
                 'less-loader'
             ],
         },
     ],
 },
 plugins: [
     new MiniCssExtractPlugin({
         filename: '[name].css', // 输出⽂件的名字
         // ... 其余配置
     }),
 ]
};
复制代码

图片和静态文件

使用到url-loader和file-loader，url-loader能够限制文件大小，会返回dataUrl，不会输除真实的文件，能够减小请求次数。

//安装
npm install url-loader file-loader -D
//⼊⼝⽂件
import pic from "./logo.png";
var img = new Image();
img.src = pic;
img.classList.add("logo");
var root = document.getElementById("root");
root.append(img);
//使⽤
module.exports = {
     modules: {
         rules: [
             {
                 test: /\.(png|jpg|gif|jpeg|webp|svg|eot|ttf|woff|woff2)$/,
                 use: [{
                     loader: 'url-loader', // 只要配置url-loader便可，内部会⾃动调⽤file-loader
                     options: {
                         limit: 10240, //限制大小，⼩于10240的⽂件会被转换成DataURL
                         name: '[name]_[hash:6].[ext]', // 设置输出⽂件的名字
                         outputPath: 'assets', // 设置资源输出的⽬录
                     }
                 }],
                 exclude: /node_modules/
             }
         ]
     }
}
复制代码

注：limit设置太大会致使js文件加载变慢，而且要配合加载速度和网络请求次数。若是有图片压缩要求，能够使用：image-webpack-loader

HTML页面处理

能够使用htmlwebpackplugin会在打包结束后，⾃动⽣成⼀个html⽂件，并把打包⽣成的js模块引⼊到该html 中。

//安装
npm install --save-dev html-webpack-plugin
//配置
title: ⽤来⽣成⻚⾯的标题
filename: 设置的⽂件名，默认是index.html, 也能够直接配置带有⼦⽬录。
template: 模板⽂件路径，⽀持加载器，⽐如 html!./index.html
inject: true | 'head' | 'body' | false ,注⼊全部的资源到特定的template或templateContent 中，若是设置为true或者 body，全部的js文件会被放置到 body
元素的底部，'head' 会被放置到 head 元素中。
favicon: 添加特定的 favicon 路径到输出的 HTML ⽂件中。
minify: {} | false , 传递 html-minifier 选项给 minify 输出
hash: true | false,默认添加⼀个惟⼀的webpack编译hash到全部包含的脚本和CSS⽂件，对于解除cache缓存颇有⽤。
cache: true | false,默认在⽂件修改以后才会发布⽂件。
showErrors: true | false, 若是为 true, 这是默认值，错误信息会写⼊到 HTML ⻚⾯中
chunks: 容许只添加某些块 (⽐如，仅仅 unit test 块)
chunksSortMode: 容许控制块在添加到⻚⾯以前的排序⽅式，⽀持的值：'none' | 'default' |{function}-default:'auto'
复制代码

souceMap

经过sourceMap找到源码，在开发环境dev中默认开启

devtool:"none" //生产环境关闭配置
复制代码

source-map产生.map文件

devtool:"cheap-module-eval-source-map",// 开发环境配置
devtool:"cheap-module-source-map", // 线上⽣成配置，线上不推荐开启
复制代码

Hot Module Replacement热模块替换

css:不支持抽出来的css文件，须要用到style-loader，而且不⽀持contenthash，chunkhash

js:须要使⽤module.hot.accept来观察模块更新从⽽更新

//配置启动
devServer: {
     contentBase: "./dist",
     open: true,
     hot:true,
     hotOnly:true //即使HMR不⽣效，浏览器也不⾃动刷新，就开启hotOnly
}

const webpack = require("webpack");
//配置插件的地方添加：
plugins: [
     new CleanWebpackPlugin(),
     new HtmlWebpackPlugin({
         template: "src/index.html"
     }),
     new webpack.HotModuleReplacementPlugin()
]
复制代码

上面就是经常使用的一些配置