前言

此內容是個人學習筆記,以便日後翻閱。非教程,如有錯誤還請指出

Webpack

• 打包文件
• 支持JS模塊化
• 模式: production(0配置默認), development(生產環境)

更詳細的請前往 webpack官網

安裝

• npm i webpack webpack-cli -D

執行 webpack

• npx webpack
• 註意: 在有package.json的目錄下執行命令, 當前目錄一定要有src文件夾

手動配置webpack

module.exports = {
    mode: ‘development‘, // 生產環境
    entry: ‘./src/index.js‘, // 入口文件
    output: {
        filename: ‘ bundle.js‘,
        path: path.resolve(__dirname, ‘dist‘),  // 目標輸出路徑, path的絕對路徑
    }
}
 

mode: 告訴 webpack 使用響應模式的內置優化

• 使用development

    module.exports = {
    + mode: ‘development‘
    - plugins: [
    -   new webpack.NamedModulesPlugin(),
    -   new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("development") }),
    - ]
    }

webpack在生產環境下默認使用的插件。

• production

  module.exports = {
  +  mode: ‘production‘,
  -  plugins: [
  -    new UglifyJsPlugin(/* ... */),
  -    new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("production") }),
  -    new webpack.optimize.ModuleConcatenationPlugin(),
  -    new webpack.NoEmitOnErrorsPlugin()
  -  ]
  }
 

在生產環境下會對代碼進行代碼壓縮等優化, 默認使用這些插件

## package.json中配置 webpack 快捷腳本
javascript "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack --config webpack.config.js" },
在腳本 scripts對象中新增了 build命令, 指定webpack --config, 通過--config選項來指定配置文件。
當執行 npm run build時, 會自動啟用 webpack,並且找到 webpack.config.js配置文件並執行。

## plugins插件

• webpack-dev-server
  為webpack應用程序提供開發服務器,它只適用於開發。在scripts中可以配置 "dev": "webpack-dev-server""
  運行使用 npm run dev

筆記地址

Webpack學習筆記一初探Webpack