webpack 4 入坑及爬坑记录

一、安装

在本机安装好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

webpack 4 入坑及爬坑记录

原文地址：https://www.cnblogs.com/layaling/p/9264552.html