webpack4.x学习笔记

Posted 2020-11-01 solaZhan

有输入必须有输出，今天就来输出一下学习webpack的过程。

不得不先吐槽一下，比起可爱的grunt和好用的gulp，对webpack真心爱不起来！

还有一个血的教训：千万不要偷懒，有问题直接去官网。。。

本文旨在记录学习webpack的过车和遇到的问题，适合对node和webpack基础知识有些了解的开发人员，不会详细到记录操作命令；还有些问题无解，还请高手指教。

首先贴上搭建时候各种包的版本，毕竟webpack每次升级兼容性都不太好

操作系统：windows 10；node：v8.9.4

搭建步骤

1、安装webpack，webpack-cli，webpack-dev-server  html-webpack-server  （webpack-cli在4.x的版本中已经被抽离，这里需要再安装一下）；

　  对应配置： 

　　　　　　a、在package.json的scripts中配置启动server的命令。

 　　

　　　　　　b、在webpack.config.js中配置入口，出口，以及server；

　　　　　　　  有关server的更多配置参数请参考  https://webpack.js.org/configuration/dev-server/#src/components/Sidebar/Sidebar.jsx

　　　　　　c、配置html-webpack-plugin，在编译后的文件夹自动生成一个html，并且已经添加了编译后的入口js；

　　配置后webpack.config.js：（这时候我们就可以直接用 npm run dev 来启动服务了。）

const webpack = require(\'webpack\');
const path = require(\'path\');
const HtmlWebpackPlugin = require(\'html-webpack-plugin\');
module.exports = {
    entry:{//入口文件，这里可以配置多个入口
        main: path.resolve(__dirname,\'src/module/index/main.js\'),
        //plugin: path.resolve(__dirname,\'src/plugin/plugin.js\')
    },
    output: {//打包后文件位置以及文件名
        path: path.resolve(__dirname,\'dist\'),
        filename: \'[name].js\' 
    },
    devServer: {//server配置
        contentBase: path.join(__dirname,"dist"), //服务指向的文件夹
        port: 9000,//端口号
        inline: true,//自动刷新模式配置为inline
        open: true, //是否自动打开页面
        proxy: { //代理配置
            "/dist": {
                target: "http://localhost:3000",
                pathRewrite: {
                    "^/api": ""
                },
                bypass: function(req, res, proxyOptions){
                    //代理过滤函数
                    return ""
                }
            }
        }
    },
    plugins: [
        new HtmlWebpackPlugin({
            //配置生成新html的源html
            template: path.resolve(__dirname,\'src/index.html\')
        }) 
    ]
}

 

2、配置loader

　　a、安装js处理包：babel-loader  babel-ccore  babel-preset-env并配置

　　　　babel-preset-env 可以根据配置的env只编译那些还不支持的特性，详情请参考https://github.com/babel/babel-preset-env

{
    test: /\\.js$/,
    use: {
        loader: \'babel-loader\',
        options: {
            presets: [\'env\'],
            cacheDirectory: true //配置允许缓存，加快编译速度
        }
    }
}

　　b、安装css处理包 node-sass  sass-loader（代码中使用sass，less的配置跟sass一样，只要安装less对应的处理插件即可）

　　　  安装css分离处理插件  extract-webpack-text-plugin，把css样式从html页面摘出来放到单独的文件中

　　　  sass-loader 依赖于 node-sass，所以这里不要忘记安装 node-sass；

　　　 首先引入extract-webpack-text-plugin，并new出两个对象来，分别处理css和less，传参为处理后样式的保存路径：

const ExtractTextPlugin = require("extract-text-webpack-plugin");

const extractCss = new ExtractTextPlugin(\'css/[name].css\');
const extractLess = new ExtractTextPlugin(\'css/[name].css\');

 

　　　module中配置loader的rules：

{
    test: /\\.scss$/,
    use: extractLess.extract(["css-loader","sass-loader"])
},
{
    test: /\\.css$/,
    use: extractCss.extract({
         fallback: "style-loader",
          use: "css-loader"
    })
},

 

　　　plugins里添加extractCss和extractLess插件：

plugins: [
    new HtmlWebpackPlugin({
        template: path.resolve(__dirname,\'src/index.html\')
    }),
    extractCss,
    extractLess
]

 

　　c、img，字体等文件loader安装配置   url-loader  file-loader

　　　 注意：文档里介绍url-loader是基于file-loader封装的支持更多配置的loader，但是经测试发现，url-loader并不能单独使用，需要同时安装file-loader才可

　　　　　　哪位同学如果知道原因还请留言，先感谢！

{//加载图片loader配置
    test: /\\.(png|jpg|gif)$/,
        use: [
        {
            loader: \'url-loader\',
            options: {
              limit: 8192 //大小限制
            }
        }
    ]
},
{//加载字体等loader配置
    test: /\\.(eot|svg|ttf|woff|woff2)(\\?\\S*)?$/,
    use:{
        loader: \'file-loader\'
    }
}

 3、其他插件配置

　　uglifyJsPlugin，这个插件在4.x的版本中，也已经被独立出来，需要单独安装才能使用。

　　关于模块热加载的开启，官方文档中给出多种实现，这里给出使用devServer实现方式的测试：

　　其他实现方式详情参考 https://doc.webpack-china.org/guides/hot-module-replacement

　　在devServer 中设置 hot: true，在plugins中添加webpack.HotModuleReplacementPlugin();

　　测试结果：

　　　　　　修改html文件：浏览器打出HMR字样的提示，但是页面并没有变化：

　　　　　　修改js文件：编译后页面完全刷新；

当我打算继续配置多入口多页面时，竟然发现我只能循环调用 html-webpack-plugin来生成html；

到目前位置，webpack给我的感觉就是编译速度慢，文档介绍不清晰以至于奇奇怪怪的bug一个又一个，这些感受大概是因为学习不够深入，不够细致。

最后，贴出package.json和webpack.config.js

{
  "name": "webpackOnly",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \\"Error: no test specified\\" && exit 1",
    "dev": "webpack-dev-server"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.6.1",
    "css-loader": "^0.28.11",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "file-loader": "^1.1.11",
    "html-webpack-plugin": "^3.2.0",
    "node-sass": "^4.8.3",
    "sass-loader": "^7.0.1",
    "style-loader": "^0.21.0",
    "uglifyjs-webpack-plugin": "^1.2.5",
    "url-loader": "^1.0.1",
    "webpack": "^4.6.0",
    "webpack-cli": "^2.0.15",
    "webpack-dev-server": "^3.1.3"
  },
  "dependencies": {
    "element-ui": "^2.3.6"
  }
}

const webpack = require(\'webpack\');
const path = require(\'path\');
const HtmlWebpackPlugin = require(\'html-webpack-plugin\');
const UglifyJsPlugin = require(\'uglifyjs-webpack-plugin\');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const extractCss = new ExtractTextPlugin(\'css/[name].css\');
const extractLess = new ExtractTextPlugin(\'css/[name].css\');

module.exports = {
    entry:{//入口文件，这里可以配置多个入口
        main: path.resolve(__dirname,\'src/module/index/main.js\'),
        plugin: path.resolve(__dirname,\'src/plugin/plugin.js\')
    },
    output: {//打包后文件位置以及文件名
        path: path.resolve(__dirname,\'dist\'),
        filename: \'[name].js\' 
    },
    devServer: {//server配置
        contentBase: path.join(__dirname,"dist"), //服务指向的文件夹
        port: 9000,//端口号
        inline: true,//自动刷新模式配置为inline
        open: true, //是否自动打开页面
        hot: true,
        proxy: { //代理配置
            "/dist": {
                target: "http://localhost:3000",
                pathRewrite: {
                    "^/api": ""
                },
                bypass: function(req, res, proxyOptions){
                    //代理过滤函数
                    return ""
                }
            }
        }
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname,\'src/index.html\')
        }),
        new UglifyJsPlugin({
            uglifyOptions: {
                compress: false
            }
        }),
        new webpack.HotModuleReplacementPlugin(),//热加载插件
        extractCss,
        extractLess
    ],
    module: {
        rules: [
            {
                test: /\\.js$/,
                use: {
                    loader: \'babel-loader\',
                    options: {
                        presets: [\'env\'],
                        cacheDirectory: true //配置允许缓存，加快编译速度
                    }
                }
            },
            {
                test: /\\.scss$/,
                use: extractLess.extract(["css-loader","sass-loader"])
                /*use: [{ //不使用css抽离的配置方式
                    loader: \'style-loader\'
                },{
                    loader: \'css-loader\'
                },{
                    loader: \'sass-loader\',
                    options: {
                        includePaths: ["src"]
                    }
                }]*/
            },
            {
                test: /\\.css$/,
                use: extractCss.extract({
                     fallback: "style-loader",
                      use: "css-loader"
                })
            },
            {
                test: /\\.(png|jpg|gif)$/,
                use: [
                    {
                        loader: \'url-loader\',
                        options: {
                          limit: 8192
                        }
                    }
                ]
            },
            {
                test: /\\.(eot|svg|ttf|woff|woff2)(\\?\\S*)?$/,
                use:{
                    loader: \'file-loader\'
                }
            }
        ]
    }
}