Webpack 4.0探险记

打包 JS

babel 更新到 8.X 之后包都改了名
在webpack 4.0 中使用

• 先安装以下包

    "@babel/core": "^7.1.2",
    "@babel/plugin-transform-object-assign": "^7.0.0",
    "@babel/plugin-transform-runtime": "^7.1.0",
    "@babel/preset-env": "^7.1.0",
    "@babel/runtime": "^7.1.2",
    "babel-loader": "^8.0.4",

• 在 webpack.config.js 中配置
  改动了以前 babel-preset-env
  由" presets": [ "es-2015" ] 变为 "presets": [ "@babel/preset-env" ]

            {
                test: /\.js$/,
                exclude: path.resolve(__dirname, '/node_modules'),
                loader: 'babel-loader',
                options: {
                    "presets": ["@babel/preset-env"]
                }
            }

• options 属性也可以单独写在 .babelrc 文件中

打包 CSS

extract-text-webpack-plugin 在webpack4.0 下 需要安装 4.0版本

  npm i -D extract-text-webpack-plugin@4.0.0-beta.0

不然会报一个warning

npm WARN extract-text-webpack-plugin@3.0.2 requires a peer of webpack@^3.1.0 but none is installed. You must install peer dependencies yourself.

使用 postcss-loader 自动添加前缀

• 首先安装 autoprefixer , postcss-load 两个包

• 配置

            {
                test: /\.less$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: ['css-loader', {
                        loader: 'postcss-loader',
                        options: {
                            plugins: [
                                require('autoprefixer')({
                                    browsers: ['last 5 versions']
                                })
                            ]
                        }
                    }, 'less-loader']
                })
            }

webpack 执行loader是由右到左, 所以先用less-loader 处理再使用postcss-loader添加前缀

处理 Vue 文件: webpack4.0 下 vue-loader 要 15.X 版本

• 首先安装包

    "vue-loader": "^15.4.2",
    "vue-style-loader": "^4.1.2",
    "vue-template-compiler": "^2.5.17",

然后在webpack.config.js 中 引入 vue-loader 插件

// webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  module: {
    rules: [
      // ... other rules
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  plugins: [
    // make sure to include the plugin!
    new VueLoaderPlugin()
  ]
}

使用插件 html模板插件
html-webpack-plugin

new HtmlWebpackPlugin({
            title: '登陆界面',      // 标题 
            filename: 'login.html',   // 生成目标文件名
            template: './pages/login.html',  // 源文件路径
            inject: 'body',  // script标签注入位置 , head / body
            hash: true,  // 使用哈希值
            chunks: ['login', 'lib'],  // 引入的js块, 名字对应entry入口打包的块
            minify: {
                removeComments: true, //移除HTML中的注释
                collapseWhitespace: true, //移除空白字符
                minifyJS: true,   // 压缩js
                removeScriptTypeAttributes: true, 
                removeStyleLinkTypeAttributes: true
            }
        })

• 多页面的话就多实例化几个html-webpack-plugin

resolve 省略后缀以及设置路径别名

resolve: {
        alias: {
            '@static': path.resolve(__dirname, 'src/static'),
            '@api': path.resolve(__dirname, 'src/api'),
            '@components': path.resolve(__dirname, 'src/components'),
            '@router': path.resolve(__dirname, 'src/router')
        },
        extensions: ['.js', '.vue', '.json', '.less', '.css']
    }

• 在.vue文件中的style模板使用@import引入别名路径时, 要 加 "~"
• 加上波浪符,不然会被认为是相对路径

分离js, 打包第三方库

    entry: {
        login: './src/login.js',
        index: './src/index.js',
        lib: ['vue', 'vue-router', 'axios', 'iview']
    },

• 入口分为三个模块

    optimization: {
        splitChunks: {
            cacheGroups: {
                commons: {
                    name: 'lib',   // 生成文件名
                    chunks: 'all',
                    minChunks: 2
                }   
            }
        }
    }

插件配置具体看 https://www.jianshu.com/p/3066d96aec8b

ps: 在Ubuntu环境下报警告 fsevents

npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

• 原因是fsevents包是在mac环境下,当前环境是Linux. 忽略即可, 没什么影响

在Ubuntu中，使用Sublime修改文件，webpack-dev-server不自动编译热替换

• Linux中Inotify监控文件最大数量过少，导致程序不知道修改了文件。

注： Inotify 是一个 Linux 内核特性，它监控文件系统，并且及时向专门的应用程序发出相关的事件警告，比如删除、读、写和卸载操作等

解决方法: sudo sysctl fs.inotify.max_user_watches=524288
来自 https://segmentfault.com/a/1190000008526582