当前位置 > it书童 > webpack > 正文
推荐小册
java高效编程
怎样更高效地用 java 编程

juc并发工具库
java并发编程工具库

设计模式
设计模式

jvm调优
jvm调优

rabbitmq实战
rabbitmq实战

redis实战
redis实战

Keepavlied高可用集群
Keepavlied高可用集群

nginx入门到实战
nginx入门到实战

java调试
java调试中遇到的各种坑

java输入输出流
java输入输出流

webpack 安装及配置文件

webpack it书童 2020-02-08 10:47:45 0赞 0踩 587阅读 0评论

首先要安装 node 环境,到官网下载最新版的安装包,然后 npm 换成淘宝源

$ npm config set registry=https://registry.npm.taobao.org

接下来在项目目录执行:

$ npm init -y

全局安装

$ npm install webpack webpack-cli -g
$ webpack -v
4.41.5

并不推荐使用全局安装,在多个项目时会有版本冲突,如有两个项目,一个用 webpack3 另一个用 webpack4

卸载全局安装的 webpack

$ npm uninstall webpack webpack-cli -g

全局安装仅供了解

局部安装

在项目内安装 webpack

$ npm install webpack webpack-cli -D

-D 相当于 --save-dev

注意:不能直接用 webpack, 这样使用找的是环境变量,应该加上 npx 前缀

$ npx webpack -v
4.41.5

建另一个不同版本的 webpack 项目

$ mkdir demo2
$ cd demo2
$ npm init -y
$ npm install webpack@4.16.5 webpack-cli -D
$ npx webpack -v
4.16.5

这样就可以在不同项目中使用不同版本的 webpack

配置文件

在上节文章中,我们并没有看到 webpack 的配置文件,这是因为 webpack 已经为我们默认了常用的配置。就像那句话说的:“哪有什么岁月静好,不过是有人替你负重前行”

但我们终究需要自定义配置,默认的配置文件名称为:webpack.config.js

在项目目录下创建配置文件:

$ touch webpack.config.js
$ cat webpack.config.js
const path = require('path');

module.exports = {
    entry: './index.js',
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'bundle')
    }
}

以上配置的意思是:对 index.js 文件进行打包,生成的文件路径为 bundle/main.js

在上节的 demo 目录下执行:

$ npx webpack

可以看到生成了 bundle/main.js 文件

在项目中运行 npx webpack 时,默认会去找 webpack.config.js,如果名称变了,就需要指定,如:

$ npx webpack --config myconfig.js

自定义编译命令

我们还可以自定义编译命令,在 package.json 修改:

"scripts": {
  "bundle": "webpack"
},

以上配置表示在命令行中执行 npm run bundle 时就会执行 webpack 指令,而这个 webpack 指令会优先找项目安装的 webpack

如此,我们就可以用这个命令来执行打包

$ npm run bundle

忽略警告

以上在执行打包时,总会有下面的警告信息:

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

这是因为没有声明打包的模式,配置后就不会报警告

webpack.config.js

module.exports = {
    mode: 'development',
    // ...
}

规范目录

为了更直观管理项目代码,将业务代码封装到 src 目录中,将 index.html 放到 dist 目录,dist 目录的文件是对外公开的

修改了路径,也需要相应修改源码的路径引用

webpack.config.js

const path = require('path');

module.exports = {
    mode: 'development',
    entry: './src/index.js',
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist')
    }
}

源码

关于我
一个文科出身的程序员,追求做个有趣的人,传播有价值的知识,微信公众号主要分享读书思考心得,不会有代码类文章,非程序员的同学请放心订阅
转载须注明出处:https://www.itshutong.com/articles/412/webpack-installation-and-configuration-files