webpack 4 入坑及爬坑记录

Posted 2020-11-21 Layaling the web

一、安装

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