webpack安装与使用

文档

官方文档：webpack

其它文档：菜鸟

前言

需要先安装 node ：node安装与配置_木心操作的博客-CSDN博客

初始化

npm init -y

安装

全局安装

npm install webpack -g

安装指定版本 

npm install webpack@3.12.0 -g

 局部安装

npm install webpack -D
# 或
npm install webpack –save-dev

 常用依赖

css-loader

npm install style-loader css-loader -D

file-loader

npm i file-loader -D

html-webpack-plugin

npm i html-webpack-plugin -D

 less-loader

npm i less-loader -D

url-loader

npm i url-loader -D

打包命令

全局安装打包命令

webpack

 局部安装打包命令

npx webpack

配置打包命令

在 package.json 的 "scripts" 里面添加 "build": "npx webpack"，没有"scripts"就添加一个；然后就可以在终端使用 npm run build 进行打包

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "npx webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {},
  "devDependencies": {
    "webpack": "^3.12.0",
    "webpack-cli": "^3.3.12",
    "css-loader": "^6.7.1",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^5.5.0",
    "less-loader": "^11.0.0",
    "style-loader": "^3.3.1",
    "url-loader": "^4.1.1"
  }
}

 main.js 文件

可以使用 impot 或 require() 加载文件

import './style.css'
require("./index.js")

webpack.config.js 配置

mode：打包模式（"production" | "development" | "none"）

entry：要打包的文件

output：打包后的位置与命名

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

module.exports = {
    // 通过选择 development, production 或 none 之中的一个，来设置 mode 参数，其默认值为 production。
    mode: 'development',
    entry: path.join(__dirname, './src/main.js'),
    output: {
        publicPath: './', // 开放目录
        path: path.join(__dirname, './dist'),
        filename: 'index.js',
    },
    module: {
        rules: [
            { test: /\.css$/i, use: ['style-loader', 'css-loader'] },
            { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
            // 打包后less里面的图片不显示，解决：加上 esModule: false 与 type: 'javascript/auto'
            { test: /\.(jpg|png|gif|svg)$/, use: [{ loader: 'url-loader', options: { limit: 20000, esModule: false } }], type: 'javascript/auto' },
        ],
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: '数据展示',
            filename: 'index.html',
            template: './src/index.html',
            favicon: path.join(__dirname, './src/favicon.ico'),
        }),
    ],
    watch: true, // 开启监听 -- 热加载
}

启用监听模式 

类似热加载

npx webpack --progress --colors --watch

解决报错

启动监听模式 webpack --progress --colors --watch 报以下错误

找到文件：node_modules\webpack-cli\bin\cli.js:137

删除中间的点：const statsPresetToOptions = require("webpack").Stats.presetToOptions;

参考：使用webpack命令打包时，报错TypeError: Cannot read property 'presetToOptions' of undefined的解决办法

区分开发与生产

安装 cross-env （跨平台设置环境和使用环境变量）

当然不装也可以获取node的process对象，这个包是解决不同电脑上设置环境变量的方式不一样的问题；

npm i cross-env -D

vue使用

mounted() {
    const NODE_ENV = process.env.NODE_ENV
    console.log(NODE_ENV)
},
methods: {},

参考：Webpack配置区分开发环境和生产环境 - 有梦想的咸鱼前端 - 博客园