webpack4.x相关笔记整理

2018-12-14 08:37:29来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

概念

Webpack是一个模块打包机,它可以将我们项目中的所有js、图片、css等资源,根据其入口文件的依赖关系,打包成一个能被浏览器识别的js文件。能够帮助前端开发将打包的过程更智能化和自动化。

WebPack和Grunt以及Gulp相比有什么特性

Webpack和另外两个并没有太多的可比性,Gulp/Grunt是一种能够优化前端的开发流程的工具,而WebPack是一种模块化的解决方案,不过Webpack的优点使得Webpack在很多场景下可以替代Gulp/Grunt类的工具。

开始使用

安装webpack,目前webpack已更新到4.x版本,且大力度宣传的是 cli 方式启动,更推崇的是让开发者使用高度封装的 cli。基于此,我们应该安装webpack^4.1.1、webpack-cli^2.0.10(想要执行webpack的命令必须有这个包)、webpack-dev-server^3.1.0。

webpack的mode

webpack4 的mode给出了两种配置:developmentproduction。生产模式下,启用了 代码压缩、作用域提升(scope hoisting)、 tree-shaking,使代码最精简;开发模式下,相较于更小体积的代码,提供的是打包速度上的优化。所以,我们一般配置2个文件,webpack.dev.conf.js和webpack.prod.conf.js。修改package.json里面的scripts:

"scripts": {
   "dev": "webpack --mode development",
   "build": "webpack --mode production"
}

按项目搭建诉求加入配置

一般诉求:

  1. js的处理:转换 ES6 代码,解决浏览器兼容问题
  2. css的处理:编译css,自动添加前缀,抽取css到独立文件
  3. html的处理:复制并压缩html文件
  4. dist的清理:打包前清理源目录文件
  5. assets的处理:静态资源处理
  6. server的启用:development 模式下启动服务器并实时刷新
  7. source-map
  8. eslint

1.转换js,解决兼容性问题,用 babel 转换 ES6 代码,用 babel 转换 ES6 代码需要使用到babel-loader,我们需要安装一系列的依赖:

npm i babel-core babel-loader babel-preset-env --save-dev

然后在根目录新建一个babel配置文件.babelrc

{
    "presets": [
        [
            "@babel/preset-env",
            {
                "targets": {
                    "browsers": [
                        "last 2 iOS major versions",
                        "last 2 Android major versions"
                    ],
                    "ios":"8.2"
                },
                "exclude":["es6.promise"],
                "useBuiltIns": "usage",
                "debug": true
            }
        ]
    ],
    "plugins": ["@babel/transform-runtime"]
}

 

Babel默认只转换新的JavaScript语法,而不转换新的API。 例如,Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等全局对象,以及一些定义在全局对象上的方法(比如 Object.assign)都不会转译。 如果想使用这些新的对象和方法,则需要为当前环境提供一个polyfill。

解决方案一:

引入babel-polyfill,它会”加载整个polyfill库”,针对编译的代码中新的API进行处理,并且在代码中插入一些帮助函数。

解决方案二:

babel-runtime

两种方案区别:

babel-polyfill解决了Babel不转换新API的问题,但是直接在代码中插入帮助函数,会导致污染了全局环境,并且不同的代码文件中包含重复的代码,导致编译后的代码体积变大。babel-runtime配置了之后,打包时会“按需加载”,当用到某个polifill时再引入对应的垫子,这样可以减少体积。但在某些情况下仍然不能被babel-runtime替代, 例如,代码:[1, 2, 3].includes(3),Object.assign({}, {key: 'value'}),Array,Object以及其他”实例”下es6的方法,babel-runtime是无法支持的, 因为babel-runtime只支持到static的方法。

因此,babel-runtime适合在组件,类库项目中使用,而babel-polyfill适合在业务项目中使用。

babel-runtime版本搭配注意:

//安装babel-runtime和babel-plugin-transform-runtime,配置如下:
{
    "plugins": ["transform-runtime"]
}
//高版本的babel,安装@babel/plugin-transform-runtime、@babel/runtime
{
    "plugins": ["@babel/transform-runtime"]
}

 

2.转换css

相关的loder:less-loader、postcss-loader、css-loader、style-loader等。利用mini-css-extract-plugin来打包到一个文件里面。参考代码:

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = (env, argv) => {
    const devMode = argv.mode !== 'production'
    return {
        module: {
            rules: [
                    {
                        test: /\.css$/,
                        use: [
                            devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
                            'css-loader',
                            'postcss-loader'
                        ]
                    },
                ]
        },
        plugins: [
            new MiniCssExtractPlugin({
                filename: "[name].css",
                chunkFilename: "[id].css"
            })
        ]
    }
}

 

3.处理html文件,一般用html-webpack-plugin,参考代码:

const HtmlWebPackPlugin = require("html-webpack-plugin");
module.exports = {
    module: {
        rules: [
            {   
                test: /\.html$/,
                use: [{
                loader: "html-loader",
                options: {
                    minimize: true
                }
            }]
        }
    ]
},
plugins: [
    new HtmlWebPackPlugin({
        template: "./src/index.html",
        filename: "./index.html"
    })
    ]
};

更多配置解释,参考https://segmentfault.com/a/1190000007294861

 

4.清理

每次打包,都会生成项目的静态资源,随着某些文件的增删,我们的 dist 目录下可能产生一些不再使用的静态资源,webpack并不会自动判断哪些是需要的资源,为了不让这些旧文件也部署到生产环境上占用空间,所以在 webpack 打包前最好能清理 dist 目录。

const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
    plugins: [
        new CleanWebpackPlugin(['dist']),
    ]
};    

 

5.资源处理

           {
                test: /\.html$/,
                loader: 'art-template-loader',
            }, {
                test: /\.jpg$/,
                loader: 'url-loader?mimetype=image/jpg'
            }, {
                test: /\.png$/,
                loader: 'url-loader?mimetype=image/png'
            },
            {
                test: /\.svg/,
                loader: 'url-loader?mimetype=image/svg+xml'
            }

 

6.server的启用

"scripts": {
    "start": "webpack-dev-server --mode development --open",
    "build": "webpack --mode production"
}

 

7.开启source-map

devtool: "inline-source-map" //详细到打包前的每个没被压缩的文件
or
devtool: "source-map" //打包后的未压缩文件

 

8.配置eslint

8.1要使webpack支持eslint,就要要安装eslint-loader。

{
    test: /\.js$/,
    loader: 'eslint-loader',
    enforce: "pre",
    include: [path.resolve(__dirname, 'src')], // 指定检查的目录
    options: { // 这里的配置项参数将会被传递到 eslint 的 CLIEngine
    formatter: require('eslint-friendly-formatter') // 指定错误报告的格式规范,formatter默认是stylish,如果想用第三方的要另外安装
    }
}

8.2安装eslint,创建配置文件 '.eslintrc.js'

module.exports = {
    'root': true,
    'plugins': [
        'html'
    ],
    'settings': {
        'html/html-extensions': ['.wxml']
    },
    'rules': {
        'newline-per-chained-call': 'off',
        'eqeqeq': 'off',
        'indent': ['error', 4, { SwitchCase: 1 }],
        'prefer-rest-params': 'off',
        'prefer-template': 'off',
        'array-callback-return': 'off',  // 暂时关闭
        'prefer-const': 'warn',
       

        'no-restricted-properties': [2, {
            'object': 'wx',
            'property': 'navigateTo',
            'message': 'Please use this.$goto!!!'
        }]
    }
}

 

参考资料:https://segmentfault.com/a/1190000012936029#articleHeader2

更多详细细节看文档:http://eslint.cn/docs/user-guide

production相关的一些配置

1、代码压缩,uglifyjs-webpack-plugin

new UglifyJsPlugin({
    test: /.js$|.jsx$/i,
    uglifyOptions: {
        compress: {
            pure_funcs: ['console.log', 'alert']
        },
    },
})    

 

2.提取公共模块

output: {
...
chunkFilename: '[name].[chunkhash:8].js'
},
...
optimization: {
    splitChunks: {
    cacheGroups: {
        vendor: {
            test: /[\\/]node_modules[\\/]/,
            name: 'common',
            chunks: 'all'
        }
    }
    }
}                    

 

详细参考:https://www.cnblogs.com/ufex/p/8758792.html

 

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:ReactDom

下一篇:如何收集常见的前端性能信息