webpack4.0--安裝操做

1、安裝webpack

1.全局安裝webpack npm install -g webpack
2.初始化項目目錄 npm init //能夠一路回車
3.在當前項目安裝webpack cnpm i webpack
4.安裝webpack-cli cnpm i webpack-cli -D ,-D在開發環境中局部安裝

• 管理webpack命令行的工具
  
• webpack3中，webpack和CLI在同一個包裏，但webpack4中，分開的，因此，若是—D 不行，就須要全局安裝，-g

2、項目配置，打包及引用

1.配置mode,有production和development兩個

webpack --mode development

2.項目新建

mkdir/md src   //刪除文件是rd/s/q
type nul> src/index.js  //建立入口文件index.js

3.項目打包及引用

src/index.js建立完以後，運行webpack --mode development/production 會自動將src/index.js文件打包到dist/main.js文件（自動生成dist和main.js)
而後，創建html,引用dist/main.js文件便可

• src/index.js 是開發文件，在開發環境使用，能夠用ES2017等，但用戶環境不支持
• dist/main.js 是最終部署的能夠再用戶瀏覽器上正常運行的代碼
• webpack 打包就是編譯代碼使的其能夠再用戶界面上使用

4.其餘參數配置

--watch 實時刷新 文件修改後自動打包
可是它不能實時刷新瀏覽器，若是須要則安裝webpack-dev-server，它的做用是修改後發佈到服務器上
--progress 查看進度
--display-modules 顯示隱藏的模塊
--colors 彩色顯示
--display-reasons 顯示打包緣由

webpack --mode development --watch --progress --display-modules --colors --display-reasons

3、webpack-dev-server--瀏覽器實時刷新

• 全局安裝：cnpm i -g webpack-dev-server
• 在項目中安裝而且將依賴寫入package.json npm install webpack-dev-server --save-dev
• 寫入自動刷新命令webpack-dev-server --mode development --output-public-path dist,指定publicPath,dist是index.html文件所引用js的地址目錄.(注意，這裏是將文件打包保存在內存中，沒有寫入磁盤)
• 默認端口8080，若是須要修改則webpack-dev-server --port 3000,能夠直接在webpack.config.js配置文件中配置devServer屬性，開啓熱更新和port
• 啓動服務，localhost:8080,顯示的是根目錄的index.html文件，能夠修改index.js能夠看到頁面在實時自動刷新。若是根目錄沒有index.html，那麼將會列出根目錄全部文件夾，且頁面就不能實時刷新了。

4、打包css

css-loader 處理css文件
style-loader 將css-loader處理以後的文件做爲標籤<style>插入html
處理css文件的兩種方式：

• index.js文件裏輸入require('style-loader!css-loader!./index.css'),這裏的index.css和index.js同級
• 輸入命令行 webpack --mode development --module-bind "css=style-loader!css-loader"

cnpm i css-loader style-loader --save-dev

5、配置webpack.config.js

建立對象進行配置

moudule.exports={
    //entry...
}

entry:入口

字符串：單輸入
數組，多輸入，打包到一塊
對象表示(hash),多頁面入口

entry : {//入口
       html_1:'./src/html_1/index.js',/*第一個頁面入口*/
        html_2:['./src/html_2/index.js','./src/html_2/index2.js'],/*第二個頁面入口*/
        app:'./src/app.js',/*應用入口*/
        vendors:'./src/vendors.js',/*第三方入口*/
    }

output:輸出

單入口，單出口，固定 output:{filename:'index.js',path:'/dist/js'}
多入口，多出口，name或者hash（MD5或者版本號，惟一性）
publicPath 佔位符，上線的時候設置服務器地址

output:{
   filename:'[name].js',/*文件名,或者filename:'[name]-[hash].js'*/
   path:__dirname + '/dist/js'/*文件路徑*/，
   publicPath:""
}

若是是node方式,輸出路徑以下

const path = require("path")
output:{path:path.resolve(__dirname,"./dist/js/bundle.js")};
//path.resolve()方法解析了當前路徑，將相對路徑改成絕對路徑

plugin插件，解決loader解決不了的事情

引用前安裝 npm install html-webpack-plugin --save-dev
配置引用 var htmlWebpackPlugin = require('html-webpack-plugin');

plugins:[
        new webpack.optimize.UglifyJsPlugin(),
        new HtmlWebpackPlugin({template: './src/index.html'})
    ]

loader 讓webpack處理非js的文件，由於webpack只理解js

兩個目標：

• .test : 須要被轉化的文件類型
• .use : 轉化時用哪個loader

全部loader都有exclude和include屬性，設置不打包和打包範圍

module:{
    rules:[
       { 
       test:/\.js$/,
       exclude:/node_modules/,//exclude設置那些不須要用babel-lader，include表示須要用
       loader:"babel-loader"
        }
    ]
}

預配置操做preset,設置如何處理js

• rules 中加入：query:{presets:['latest']}
  
• 根目錄建立.babelrc {"presets":["env"]}
• package.json加入"babel":{"presets":["latest"]}
  babel補充：
  在配置文件中配置，暗轉babel，轉換es6
  先安裝loader cnpm i babel-loader
  安裝終端工具 cnpm install -g babel-cli
  安裝轉換插件 cnpm i babel-preset-env --save-dev
  轉換命令demo babel es6.js --presets es2015
  配置.babelrc文件 {"presets":["env"]}或者"babel": {"presets": ["es2015"]}
  具體babel的參考，官方說明文檔吧

若是須要從新指定配置文件

//webpack --config 文件名
webpack --config webpack.config2.js

6、定義執行腳本

在package.json中設置,package.json中要用雙引號，要不要是編譯器報錯

"scripts": {
    "webpack":"webpack --mode development --config webpack.config.js --progress --display-modules --colors --display-reason",
    "server":"webpack-dev-server --mode development --output-public-path dist"
  },

而後命令行敲cnpm run server