webpack學習-總結,配置參考

如下是總結內容

1.命令行

//全部須要用到的命令行,三類

npm init -y//初始化package.json文件

npm i -D webpack webpack-cli//安裝webpack
npm i -D webpack-dev-server//開發模式必備插件,實現動態刷新頁面
npm i -D html-webpack-plugins//懶人必備插件,資源文件自動引用

npm i -D style-loader css-loader//配置loader必須(此處以css爲例)

2.package.json文件腳本配置

"scripts": {
    //命令行方式使用webpack,不推薦
    "build1": "webpack ./src/main.js --mode development",

    //配置好webpack.config.js文件後,配合此腳本使用webpack
    "build": "webpack",

    //配置webpack-dev-server腳本,並實現熱更新.注意,config文件修改後,需從新運行npm run dev
    "dev": "webpack-dev-server --hot"
  }

3.webpack.config.js配置文件參考.配置項實在太多,建議之後直接找別人配好的文件直接複製使用

// 注意: 不要使用 ES6 中的模塊化語法 import/export
const path = require('path')
// const webpack = require('webpack')

// 導入html-webpack-plugin
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  // 入口
  entry: path.join(__dirname, './src/main.js'),

  // 出口
  output: {
    path: path.join(__dirname, './dist'),
    filename: 'bundle.js'
  },

  // 模式
  mode: 'development',

  devServer: {
    // 自動打開瀏覽器
    open: true,
    // 修改端口號
    port: 3000
    // 熱更新: 在腳本中實現 
  },

  // 配置loader
  module: {
    rules: [
      // test 是一個正則, 用來匹配加載文件的路徑
      //  好比: import './css/index.css'

      // use 表示使用哪一個loader來處理這個類型的文件
      // 注意: 有順序!!!
      // 處理過程是: 從右往左

      // css-loader 讀取CSS文件,將其轉化爲一個模塊
      // style-loader 拿到css-loader讀取到的css文件內容,而後,建立一個style標籤,插入到head
      { test: /\.css$/, use: ['style-loader', 'css-loader'] }
    ]
  },

  plugins: [
    new HtmlWebpackPlugin({
      // 指定模板文件路徑
      template: path.join(__dirname, 'index.html')
    })
  ]
}