webpack学习笔记

## webpack安装

- yarn init -y

- yarn add webpack webpack-cli -D

## webpack 可以0配置

- 打包工具 -> 输出后的结果（js模块）

- 支持JS模块化

- package.json -> scripts -> ”build": "webpack"

## webpack 配置文件

- mode: development/production

- entry: 打包前的入口JS文件夹

- output: 打包后的文件夹及相应路径

- devServer: [contentBase]:对应目录 [port]:虚拟站点接口 [progress]:显示进度条 [open]:自动打开页面 [compress]自动压缩

- plugins(数组): 放置所有插件

- module: 模块

### 自己架设虚拟服务器

- 命令: yarn add webpack-dev-server -D

- 启动: npx webpack-dev-server

- package.json -> scripts -> "start": "webpack-dev-server"

### 打包HTML

- 命令: yarn add html-webpack-plugin -D

- template: 模板文件位置

- filename: 输出文件名称

- minify: 压缩配置 [removeAttributeQuotes]:移除双引号 [collapseWhitespace]:移除空格

- hash: 文件名+hash

### 打包css

- 命令: yarn add less-loader css-loader style-loader -D

-

 

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

module.exports = {
    devServer: {
        contentBase: './dist',
        port: 3000,
        progress: true,
        open: true,
        compress: true
    },
    mode: 'development',                                //模式 development/production
    entry: './src/index.js',                            //入口
    output: {
        filename: 'bundle.[hash].js',                   //打包文件 +hash
        path: path.resolve(__dirname, 'dist')           //打包路径(必须是绝对路径)
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
            filename: 'index.html',
            minify: {
                removeAttributeQuotes: true,            //移除双引号
                collapseWhitespace: true                //移除空格
            },
            hash: true                                  //文件+hash
        })
    ],
    module: {
        rules: [{
            test: /\.less$/,
            use: [{
                loader: "style-loader",
                options: {
                    insertAt: 'top'
                }
            }, {
                loader: "css-loader"                    // translates CSS into CommonJS
            }, {
                loader: "less-loader"                   // compiles Less to CSS
            }]
        }]
    }
}