【轉】webpack4

一、再也不支持node.js4.Xcss

二、不能用webpack命令直接打包指定的文件,只能使用webpack.config.js進行配置。vue

     即:webpack  demo01.js  bundle01.js 不能用了。node

三、CLI被移動到了一個專門的包 webpack-cli裏了。webpack

      全局安裝webpack-cliweb

      命令:npm install webpack-cli -gnpm

四、本地(項目目錄)下安裝webpack,json

     命令:npm install webpack -D

五、在webpack.config.js裏的配置,再也不支持 module下的loaders,須要把loaders改爲rules。優化

    以下:對象

    module: {開發

        rules: [
            //針對css文件,進行對應的loader處理
            { test: /\.css$/, loader: "style-loader!css-loader" }
        ]

    }

 

七、json

        webpack 如今能原生地處理 JSON

        容許經過 ESM 語法導入 JSON

八、優化:

       更新 uglifyjs-webpack-plugin 至 v1 版本,以支持 ES2015

九、Usage

      如今能夠在兩種模式中選擇 (mode or --mode) : 生產模式或開發模式

十、配置:

       NoEmitOnErrorsPlugin -> optimization.noEmitOnErrors (生產模式下默認開啓)
       ModuleConcatenationPlugin -> optimization.concatenateModules (開發模式下默認開啓)
       NamedModulesPlugin -> optimization.namedModules (開發模式下默認開啓)
       CommonsChunkPlugin 已被移除 -> optimization.splitChunks, optimization.runtimeChunk

十一、Syntax

        import() 老是返回一個命名空間對象。CommonJS 模塊被封裝到默認導出中

十二、還有一個坑,暫時尚未解決,正在研究:

        用 import Vue from "vue";  引入vue有問題,

        可是改爲   

             import Vue from "vue/dist/vue.js"; 

        是能夠用的。

相關文章
相關標籤/搜索