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": {}
}