一, 安装
在本机安装好 nodejs 的基础上, window 操作系统, cmd 打开控制台
- npm init // 初始化 npm
- npm install webpack --save-dev
正常等待安装完成, 安装完成可能会出现一些警告, 嗯... 警告, 不管了...
然后新建项目, CSS,js,html 文件一顿写, 然后运行 webpack, 报错... 提示安装 webpack-cli, 安装完成之后, 一直反复, 不能忍, 查找网页找原因, 最后据说是版本的原因, 也就是使用 webpack4+, 需要安装 CLI, 我觉得是废话, 我已经按照提示安装了, 还是报错.
最后, 解决...
删除原先安装的, 不管是全局还是局部安装的, 都删掉, 重新
npm install webpack webpack-cli --save-dev
执行时, 运行
npx webpack
不知道为什么, 官网就这么写的
就好了... 心累... 记录之
二, 配置
在 webpack 4 中, 可以无须任何配置使用, 然而大多数项目会需要很复杂的设置
新建配置文件
- webpack.congif.js
- const path = require('path');
- module.exports = {
- mode: 'production', // 指明开发坏境是生产者模式还是开发模式, 不写的话, 运行有一堆警告, 看着尴尬癌要出来
- entry: { // 入口
- app: './src/demo.js', // 简而言之, 要打包压缩的那个 js 的路径
- },
- devtool: 'inline-source-map', // 指定资源
- output: { // 出口, 输入的
- filename: 'js/[name].min.js', // 名称位置
- path: path.resolve(__dirname, 'dist'), // 输出的路径,
- //publicPath: 'http://cdn....'指定绝对路径地址
- }
- }
基本的配置, 应该就是这样, 执行 npx webpack webpack.congif.js 就会得到想要的结果
注意一下: path: path.resolve(__dirname, 'dist'), // 输出的路径, 我看 API 上必须是要绝对路径, 通过 path.resolve 来自动解析路径就可以的, 详情请戳这里 https://www.webpackjs.com/configuration/resolve/
可以同时修改 npm 的 package.json 文件
- {
- "name": "webpackdemo",
- "version": "4.14.0",
- "description": "webpack test",
- "private": true,
- "scripts": {
- "test": "echo \"Error: no test specified\"&& exit 1",
- "webpack": "webpack --config webpack.config.js --colors", // 这里这里可以添加 webpack 的各种参数, 我只加了两个 config color
- "watch": "webpack --watch"
- },
保存, 就可以直接运行 npm run webpack
还有这些参数, 都可以添加进去
- --watch // 监听自动打包
- --config // 指定配置 指定文件名
- -p // 压缩混淆脚本, 这个非常非常重要!
- -d // 生成 map 映射文件, 告知哪些模块被最终打包到哪里了其中的
- --progress // 显示进度条
- --color // 添加颜色
三, 插件
- loader // 将 css 一起和 js 打包在一起
- HtmlWebpackPlugin // 打包后自动生成对应的 html 文件
- MiniCssExtractPlugin // 单独打包分离出 css
来源: http://www.bubuko.com/infodetail-2671161.html