webpack5基本使用

參考結構

 

初始化npm

npm init -y 

 

安裝webpack：

cnpm install --save-dev webpack webpack-cli

 

打包js

const path = require('path');

module.exports  = {
    entry: './src/index.js',//多個文件用數組
    output: {
        filename: 'index.js',//多個文件用文件夾形式
        path: path.resolve(__dirname, 'dist'),
        clean: true,
    },

     devtool: 'inline-source-map' //便於定位錯誤出處

}
ps: webpack.config.js

 

build": "webpack --config webpack.config.js",

ps: package.json的script命令

 

配置默認打包模板

cnpm install --save-dev html-webpack-plugin

 

const HtmlWebpackPlugin = require('html-webpack-plugin');

plugins: [
    new HtmlWebpackPlugin({ 
        template: './index.html',//模板路徑
        minify: true //是否壓縮
    })
]

 

配置熱加載

cnpm install --save-dev webpack-dev-server

 

devServer: {
    contentBase: path.join(__dirname, 'dist'), //監聽編譯后的文件夾
    compress: false, //不壓縮
    progress:true, //顯示進度
    port: 3000,//設置端口
},

ps: webpack.config.js

 

"serve": "webpack serve --config webpack.config.js"

ps: package.json的script命令

 

配置編譯sass

cnpm install --save-dev sass sass-loader css-loader style-loader

 

module: {
    rules: [
        {
        test: /\.sass$/,
        use: [
            "style-loader",// 將 JS 字符串生成為 style 節點
            "css-loader",// 將 CSS 轉化成 CommonJS 模塊
            "sass-loader",// 將 Sass 編譯成 CSS
        ],
        },
    ],
}

ps: webpack.config.js

 

import "../scss/index.scss";

ps: 在入口文件進行引入

 

最終，不同場景做不同配置

cnpm install --save-dev cross-env

 

webpack.config.js

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

const base = {
    entry: './src/index.js',
    output: {
        filename: 'index.js',
        path: path.resolve(__dirname, 'dist'),
        clean: true,
    },
    module: {
        rules: [
          {
            test: /\.s[ac]ss$/i,
            use: [
              "style-loader",// 將 JS 字符串生成為 style 節點
              "css-loader",// 將 CSS 轉化成 CommonJS 模塊
              "sass-loader",// 將 Sass 編譯成 CSS
            ],
          },
        ],
    }
}

const development = {
    mode: "development",
    ...base,
    devtool: 'inline-source-map',
    devServer: {
        contentBase: path.join(__dirname, 'dist'),
        compress: false,
        progress:true,
        port: 3000,
    },
};

const production = {
    mode: "production",
    ...base,
    plugins: [
        new HtmlWebpackPlugin({ 
            template: './index.html',
            minify: true
        })
    ]
}

module.exports = process.env.NODE_ENV === 'development' ? development : production;

 

package.json

{
  "name": "webpack",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": {
    "build": "cross-env NODE_ENV=production webpack --config webpack.config.js",
    "serve": "cross-env NODE_ENV=development webpack serve --config webpack.config.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "cross-env": "^7.0.3",
    "css-loader": "^5.2.1",
    "html-webpack-plugin": "^5.3.1",
    "sass": "^1.32.8",
    "sass-loader": "^11.0.1",
    "style-loader": "^2.0.0",
    "webpack": "^5.31.2",
    "webpack-cli": "^4.6.0",
    "webpack-dev-server": "^3.11.2"
  },
  "dependencies": {}
}