Webpack 基礎瞭解

版本：4.0

配置文件：webpack.config.js

4.0 能夠不用配置webpack.config.js

---

入口entry

能夠配置一個或多個入口起點

module.exports = {
  entry: './path/to/my/entry/file.js'
};

出口output

配置輸出的地址，bundles

const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  }
};

loader

處理js不能處理的，而後轉化成依賴圖

const path = require('path');
const config = {
  output: {
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  }
};

module.exports = config;

pluginns 插件

const HtmlWebpackPlugin = require('html-webpack-plugin'); // 經過 npm 安裝
const webpack = require('webpack'); // 用於訪問內置插件

const config = {
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin(),
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

module.exports = config;

模式

module.exports = {
  mode: 'production'  //production 或者 development
};

命令行

npm init : 初始化項目
npm i -g webpack --save-dev : 全局安裝
npm i -D webpack： 在開發環境中安裝

基本項目構建三個文件

app.js--webpack運行的入口程序
index.html--本示例中的網頁文件
module.js--一個js模組