webpack4.0學習

webpack安裝

• 安裝本地的webpack
• webpack webpack-cli -D

webpack能夠進行0配置

• 打包工具 - > 輸出後的結果（js模塊）
• 打包（支持js的模塊化）

手動配置webpack

• 默認配置文件的名字 webpack.config.js

//webpack 用node的寫法
let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    devServer:{  //開發服務器的配置
        port:3000,
        progress:true,
        contentBase:'./dist',
        compress:true
    },
    mode:'production',//模式  默認兩種  production development
    entry:'./src/index.js', //入口
    output:{
        filename:'bundle.[hash:8].js',  //打包後的文件名
        path:path.resolve(__dirname,'dist')//路徑必須是一個絕對路徑
    },
    plugins:[        //數組，放着全部的webpack插件
        new HtmlWebpackPlugin({
            template:'./src/index.html',
            filename:'index.html',
            minify:{          
                removeAttributeQuotes:true,    //刪除雙引號
                collapseWhitespace:true   //一行顯示
            },
            hash:true    
        })
    ]
}
複製代碼

• package.json配置

{
  "name": "webpack",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "build": "webpack --config webpack.config.js",
    "dev": "webpack-dev-server"
  },
  "devDependencies": {
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.29.6",
    "webpack-cli": "^3.2.3",
    "webpack-dev-server": "^3.2.1"
  }
}

複製代碼