webpack4x 简述

webpack作为时下非常火的项目构建工具 已经有了非常多成熟的脚手架  vue-cli nuxt 但是有的时候我们需要自己实现一个比较符合自己需求的webpack配置就会有很多坑我这边简单提一些

第一个坑 现在的webpack不同于老版本 需要安装全局webpack 与webpack-cli才能运行按照下面操作执行

npm install -g webpack

npm install webpack-cli -g

创建项目

npm init 

安装本地

npm i webpack --save--dev

npm i webpack-cli --save--dev

安装本地一方面是提示依赖 一方面也是为了防止全局webpack与本地依赖包不兼容等bug导致项目无法运行

webpack4x之后又两种mode 我们可用可不用

development 开发模式

production 产出模式

安装完基本依赖之后就是创建入口文件webpack.config.js 我下面放一个我简单配置的文件然后简述一下坑点

const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')
const glob = require('glob')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const PurifyCssWebpack = require('purifycss-webpack');
//html页面模板与输出模板
const getHtmlConfig = function (name, title) {
    return {
        template: path.resolve(__dirname,'src/view/' + name + '.html'),
        filename: name + '.html',
        title: title,
        inject: true, //嵌入页面
        hash: true,
        chunks: ['common','base', name], //引入这些js
        minify: {
            collapseWhitespace:true, // 合并空白字符
            removeComments:true, // 移除注释
            removeAttributeQuotes:true // 移除属性上的引号
        }
    }
}
const config = {
    //开发模式
    // mode:'development',
    //生产模式
    // mode:'production
    entry: {
        'common': ['./src/page/common/index.js'],
        'index': ['./src/page/index/index.js'],
        'list': ['./src/page/list/index.js']

    },
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: 'js/[name]-[hash:5].js',
        publicPath:'/'

    },
    //别名
    resolve: {
        alias: {
            node_modules: __dirname + '/node_modules',
            util: __dirname + '/src/util',
            page: __dirname + '/src/page',
            service: __dirname + '/src/service',
            image: __dirname + '/src/image'
        }
    },
    //别名
    module: {
        rules:[
            //处理css
            {
                test:/\.css$/,
                use:[{loader:'style-loader'},{loader:'css-loader'},{loader:'postcss-loader'} ],
                use:ExtractTextPlugin.extract({
                    fallback:'style-loader',
                    use: ['css-loader','postcss-loader'],
                    publicPath:'../'
                })
            },
            // 处理less
            {
                test:/\.less$/,// 处理less
                use:ExtractTextPlugin.extract({
                    fallback:'style-loader',
                    use:['css-loader','less-loader']
                })

            },
            // 处理sass
            {
              test:/\.scss$/,
              use:ExtractTextPlugin.extract({
                  fallback:'style-loader',
                  use:['css-loader','sass-loader']
              })
            },
            // 处理stylus
            {
                test:/\.styl$/,
                use:ExtractTextPlugin.extract({
                    fallback:'style-loader',
                    use:['css-loader','stylus-loader']
                })
            },
            //处理js
            {
                test:/\.(js|jsx)$/,
                use:['babel-loader'],
                exclude:/node_modules/ //剔除node_modules模块
            },
            //处理图片
            {
                test:/\.(gif|png|jpg|woff|svg|eot|ttf)\??.*$/,
                use:[{
                    loader:'url-loader',
                    options:{
                        limit:5000, //设置转base64的警戒值
                        outputPath: 'images' //图片打包出去的目录
                    }
                }]
            }
        ]
    },
    //分割提取公共代码
    optimization:{
        splitChunks: {
            chunks: "async",
            minSize: 2,
            minChunks: 1,
            maxAsyncRequests: 5,
            maxInitialRequests: 3,
            name: true,
            cacheGroups: {
                default: {
                    minChunks: 2,
                    priority: -20,
                    reuseExistingChunk: true,
                },
                vendors: {
                    test: /([\\/]node_modules[\\/]|[\\/]page[\\/])/,
                    priority: -10
                }
            }
        }
    },
    devServer:{
        //设置服务器访问的基本目录
        contentBase:path.resolve(__dirname, 'dist'), // 要求服务器访问dist目录
        host:'localhost', // 设置服务器ip地址，可以是localhost
        port:8090, // 设置端口号
        open:true, //自动拉起浏览器
        hot:true //模块热跟新
    },
    plugins: [
        new CopyWebpackPlugin([{ // 静态文件输出 也就是复制粘贴
            from:path.resolve(__dirname,'src/assets'), //将哪里的文件
            to:'./pullic' // 复制到哪里
        }]),
        //热更新
        new PurifyCssWebpack({ // 消除冗余css代码
            paths:glob.sync(path.join(__dirname,'src/view/*.html')) //path.join合并路径
        }),
        new webpack.HotModuleReplacementPlugin(),
        //将css单独打包到css文件
        new ExtractTextPlugin("css/[name].css"),
        // 打包之前先清理dist目录
        new CleanWebpackPlugin(['dist']),
        //提取公共代码创建缓存组
        new HtmlWebpackPlugin(getHtmlConfig('index','首页')),
        // new HtmlWebpackPlugin(getHtmlConfig('list','列表页'))
    ]
}
module.exports = config

 

 

第一步html-plugin-webpack的使用 这个不必多少大家肯定了解 主要是设置模板文件和输出文件名 等可以按照我的配置来 这里没什么坑点

第二步一般开始用webpack-dev-server了这里就巨坑了尤其是热更新这一块

我们知道devserver为了快速开发是把我们的项目打包到内存中的默认是根路径 output中可以设置path和publicPath path是设置打包后的文件路径 publicPath 是设置打包后资源文件引用的前缀路径 这里需要注意

contentBase 参数可以配置我们的项目启动路径 但是由于devserver是默认编译打包到根路径内存所以此坑新手很容易踩到 那么如何改变devserver的编译路径呢 有人说publicPath实际上我试了并不行 这里的编译目录还是这个参数指定 

热更新 这里出现有时候热更新有时候不行 是因为 webpack4的模块机制发生了改变，都是关于hot-module的，chunkId的一些问题

项目启动后就是各种loader的配置这里没什么坑比较简单

最大的坑还是CommonsChunkPlugin的废弃这里我们怎么分包呢采用了（optimization.splitChunks 和 optimization.runtimeChunk）有兴趣可以去官方研究下不过鉴于webpack的文档更新 大家也可以自行研究当然还有很多坑 爬坑也是一种乐趣