webpack小白入門之核心概念【1-2】

經過 npm script 運行 webpack

在package.json文件中運行的腳本，默認是能夠讀取到 node_modules/.bin/下面的因此命令的經過npm run build 運行打包

原理：模塊的局部安裝會在node_modules/.bin目錄下建立軟連接

在package.json的scripts中添加一條腳本命令： "build":"webpack",

{
  "name": "webpack.1.2",
  "version": "1.0.0",
  "description": "經過 npm script 運行 webpack",
  "main": "index.js",
  "scripts": {
    "build":"webpack",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.35.3",
    "webpack-cli": "^3.3.5"
  }
}
複製代碼

經過在終端運行npm run build 便可完成打包項目。

webpack 核心概念之entry用法

在webpack.config.js文件中：

1. 單入口：entry是一個字符串。

   module.exports = { entry:'./src/file.js' }

2. 多入口：entry是一個對象

   module.exports = { entry: { index: './src/index.js', search: './src/search.js' } }

webpack 核心概念之Output的用法

1. Output用來告訴webpack如何將編譯後的文件輸出到磁盤

   module.exports = {
      entry: './src/index.js',
      output: {
        path: path.join(__dirname, 'dist'),  // 單入口只要配置path和filename這兩個參數
        filename: 'bundle.js'
      },
      mode:'production'
    }
   複製代碼

2. Output多入口配置

   module.exports = {
      entry: {
        index: './src/index.js',
        search: './src/search.js'
      },
      output: {
        filename: '[name].js',  // 經過佔位符確保文件名稱的惟一性
        path: __dirname + '/dist'
      },
      mode:'production'
    }
   複製代碼

webpack 核心概念之loaders的用法

webpack的開箱即用只支持js和json兩種文件類型，經過loaders去支持其餘文件類型，而且將他們轉化成有效的模塊，而且能夠添加到依賴圖中，loaders自己是一個函數，接受源文件做爲參數，返回轉換後的結果。

常見的loaders

名稱	描述
babel-loader	轉換ES6ES7等新特性語法
css-loader	支持.css文件的加載和解析
less-loader	將less轉換爲css
ts-loader	將ts轉換爲js
file-loader	進行圖片，字體等的打包
raw-loader	將文件以字符串的形式導入
thread-loader	多進程打包js和css

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  mode: 'production',
  module: {
    rules: [
      {
        test: /\.txt$/, use: 'raw-loader'    // test 指定匹配規則 use 指定使用的loader名稱
      }
    ]
  }
}
複製代碼

webpack 核心概念之plugins的用法

插件用於bundle文件的優化，資源管理和環境變量注入，做用於整個構建過程

常見的plugins

名稱	描述
CommonsChunkPlugin	將chunks相同的模塊代碼提取成公共js文件
CleanWebpackPlugin	清理構建項目
ExtractTextWebpackPlugin	將chunks相同的模塊代碼提取成公共js文件
CommonsChunkPlugin	將css從bundle文件裏提取成獨立的css文件
CopyWebpackPlugin	將文件或者文件夾拷貝到構建的輸出目錄
HtmlWebpackPlugin	建立html文件去承載輸出的bundle
UglifyjsWebpackPlugin	壓縮js
ZipWebpackPlugin	將打包出的資源生成一個Zip包

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  mode: 'production',
  module: {
    rules: [
      {
        test: /\.txt$/, use: 'raw-loader'    // test 指定匹配規則 use 指定使用的loader名稱
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'  //  建立html文件去承載輸出的bundle
    })
  ]
}
複製代碼

webpack核心概念之mode的用法

概念：Mode用於指定當前的構建環境是：production ， development ，仍是 none 。設置mode的值，能夠使用webpack在相應階段的內置函數，默認值爲production（webpack4.x之後纔有的概念），若是是productin，webpack會默認開啓一些在生產階段才使用的內置功能，以下參考：

選項	描述
development	設置process.env.NODE_ENV的值爲development，開啓NameChunksPlugin和NameModulesPlugin
production	設置process.env.NODE_ENV的值爲production，開啓FlagDependencyUsagePlugin,FlagIncludedChunksPlugin,ModuleConcatenationPlugin,NoEmitOnErrorsPlugin,OccurrenceOrderPlugin,SideEffectsFlagPlugin和TerserPlugin
none	不開啓任何優化選項

下一篇 webpack小白入門之資源解析【1-3】