webpack基础属性配置

1.使用npm安装webpack，在工程根目录路径栏输入cmd回车，输入

1 npm init -y
2 npm i webpack webpack@cli -D

安装过慢可以用淘宝镜像cnpm

2.创建webpack.config.js配置文件，

module.exports = {
    //开发过程用development，打包速度快，体积大
    //上线用production，打包速度慢，体积很小（压缩）
    mode:'development'
　  //entry指定入口文件
    entry: path.join(__dirname, './src/index.js'),
    //output制定输出文件地址和名称
    output: {
        path: path.join(__dirname, '/dist'),
        fliename: 'xxx.js'
    }
}

3.webpack插件安装

（1）webpack-dev-server 修改源码后自动运行

1 npm install webpack-dev-server@3.11.2 -D

packge.json配置：

"scripts": {
    "dev": "webpack serve"
}

停止自动打包：两次ctrl+c

查看html用http://localhost:8080/

webpack-dev-server将js文件放进了内存中，存在但无法查看，在html中用/xxx.js引用，便可实时查看修改效果

（2）html-webpack-plugin 打开8080端口就打开首页面

1 npm install html-webpack-plugin@5.3.2 -D

webpack.config.js配置

const path = require('path')

const HtmlPlugin = require('html-webpack-plugin')

const htmlPlugin = new HtmlPlugin({
    template: './src/index.html',
    filename: '.index.html'
})

module.exports = {
    mode:'development',
    plugins: [htmlPlugin],
    //entry指定入口文件
    entry: path.join(__dirname, './src/index.js'),
    //output制定输出文件地址和名称
    output: {
        path: path.join(__dirname, '/dist'),
        fliename: 'xxx.js'
    }
}

4.其他设置：

（1）自动打开浏览器

1 devServer:{
2         open:true,
3         host:'127.0.0.1',
4         //http中80端口号可以被省略
5         port:80
6     }

（2）loader加载css等其他文件

（3）调试错误中的行号对应问题

nosource别人不能通过报错查看源码，保证安全性

devtool:'nosource-source-map'

5.生成到物理磁盘

"build": "webpack --mode production"

原文地址：https://www.cnblogs.com/shirayuki/p/15125762.html