1.2 webpack4.0 基础自定义配置 附源码 附源码

·  阅读 618

上一节简单介绍了webpack 打包js 以及html引用加载

      本级简单介绍下webpack 的一些常用的自定义配置(后续会跟着需求在增加其它配置)及webpack.config.js(webpack默认配置名称,也可以在package.json中修改)的使用。

一、创建webpack.config.js文件

增加如下配置

let path = require('path') // node 模块
module.exports = {
    mode: 'development', // 模式 默认两种模式 一种 production development
    entry: './src/index.js', //入口
    output: {
        filename: 'index.js', // 默认是main.js 这里修改成index.js
        path: path.resolve(__dirname,'dist')  // 路径必须是一个绝对路径
    }
}复制代码

这里就说明下mode 模式的区别,其它属性感兴趣的自行修改尝试

那么先看下development 模式,执行npx webpack


在修改为production模式


对比发现很显而易见的发现index.js文件被压缩了!

二、创建自定义配置文件名称

       上面我们创建了webpack.config.js ,有同学可能需要修改下这个名字,怎么处理呢?

现在修改webpack.config.js的名称为 webpack.config.custom.js。


有两只方式可以打包

  1. 执行命令 npx webpacj --config webpack.config.custom.js 打包
  2. 使用npm 配置文件定义脚本,修改下package.json 加入
"build": "webpack --config webpack.config.custom.js"复制代码


执行npm run build 即可!其它属性详见 www.npmjs.com/package/web…

三、使用 webpack-dev-server 插件打包

      这个插件开启服务,将输出的js,html,css的文件至内存中,浏览器可以通过服务地址加载访问!

      首先还是和下载webpack一样,在终端执行 npm i webpack-dev-server -D

下载插件。

      然后,修改配置文件如下图,在工程目录执行webpack-dev-server --config webpack.config.custom.js


    或者使用package.json 脚本命令 ,执行npm run dev


但是不管是哪种方式能找到index.js所在目录,但在浏览器访问 http://localhost:5555/


很显然dist输出目录,并没加载html也没有执行index.js文件。

四、wepack 配置插件打包html 到输出目录

         这里我们使用 HtmlWebpackPlugin 插件 ,主要作用就是打包html到输出目录,本工程也就是dist目录

  1.         使用npm i html-webpack-plugin -D 进行下载。
  2.         在webpack 配置文件进行插件配置。


        为了看输出目录内容,这里我们执行npm run build。因为npm run dev 输出在内存中并不能直观看出index.html已经输出。


         当然执行npm run dev 访问浏览器也是正常显示的。我们还可配置html-webpack-plugin的其它属性详见 www.npmjs.com/package/htm…,一般压缩也就是如下配置。

plugins: [
    new HtmlWebpackPlugin({
        template: "./src/index.html",
        filename: "index.html",
        minify: {
            removeAttributeQuotes:true, // 删除引号
            collapseWhitespace:true, // 去除空格
            hash:true //哈希,解决缓存问题
        }
    })
]复制代码


源码下载

创建文件夹,cd至已创建文件夹,执行 git clone https://gitee.com/dolan_ge/webpack.git -b webpack_load_css

进入工程目录,执行 npm install -D


分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改