webpack學習筆記

目錄：

1.建立package.json

2.安裝webpack

3.webpack.config.js

1. 建立package.json

　　建立一個package.json文件，使用 npm init命令能夠自動建立。（注：使用npm命令需先安裝Node.js）

npm init

 　　初始化的package.json：

{
  "name": "libing.webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

package.json

2. 安裝webpack

　　全局安裝：

npm install -g webpack

　　本地安裝（安裝到項目目錄）：

npm install -D webpack

npm install --save-dev webpack

　　npm install -S module_name：即 npm install module_name --save，寫入dependencies。

　　npm install -D module_name：即 npm install module_name --save-dev，寫入devDependencies。

　　npm install -g module_name：全局安裝（命令行使用）

　　npm install module_name：本地安裝（將安裝包放在 ./node_modules）

　　dependencies與devDependencies區別：

　　　　◊ devDependencies中的插件：只用於開發環境，不用於生產環境。

　　　　◊ dependencies中的插件：須要發佈到生產環境。

　　查看webpack安裝版本：

# webpack全局安裝
webpack --version

# webpack非全局安裝
node_modules/.bin/webpack --version

　　安裝webpack-cli：

npm install -D webpack-cli

npm install -D webpack webpack-cli

3. webpack.config.js

　　在項目的根目錄下建立webpack.config.js，最基礎的配置：

const path = require('path');

module.exports = {
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    }
};

　　其中，

　　　　entry：webpack入口起點，指示 webpack 應該使用哪一個模塊，來做爲構建其內部依賴圖的開始。

　　　　output：指示 webpack 在哪裏輸出所建立的 bundles，以及如何命名這些文件。

　　在package.json文件中添加：

"scripts": {
  "start": "webpack"
},

　　運行命令：

npm start

　　注：npm中start是一個特殊的腳本名稱，在命令行中使用npm start就能夠執行其對於的命令。

　　　　若是對應的腳本名稱不是start，在命令行中運行須要npm run {script name}，如：npm run build

　　生成文件結構：

　　若不修改package.json，運行打包方式：

node_modules/.bin/webpack

4. webpack-dev-server

　　安裝webpack-dev-server：

npm install -D webpack-dev-server

package.json增長：

"scripts": {
  "dev": "webpack-dev-server"
},

webpack.config.js：

var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'bundle.js'
  },
  devServer: {
    port: 9000,
    inline: true,
    open: true
  }
};

5. Plugins

5.1 html-webpack-plugin

　　安裝html-webpack-plugin：

npm install -D html-webpack-plugin

　　webpack.config.js：

var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'bundle.js'
  },
  plugins: [
    new HtmlWebpackPlugin({
      minify: {
        removeComments: true,
        collapseWhitespace: true
      }
    }),
  ],
  devServer: {
    port: 9000,
    inline: true,
    open: true
  }
};

5.2 clean-webpack-plugin

　　安裝clean-webpack-plugin：

npm install -D clean-webpack-plugin

　　webpack.config.js：

const {
  CleanWebpackPlugin
} = require('clean-webpack-plugin');
const path = require('path');

module.exports = {
  mode: 'production',
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'bundle-[hash].js'
  },
  plugins: [
    new CleanWebpackPlugin()
  ]
};