webpack4.x初使用

佚名 6年前 (2019-04-17) 随笔 607人围观抢沙发百度已收录

就在今天，心血来潮，自己写了个单页面的应用，想部署到服务器上，发现一个严重的问题，静态资源就占了40M空间，主要还是对于用户的体验肯定是很不友好的：我浏览你一个网页就花了我那么多流量跟时间，这就呵呵了！！！！

作为一个称职的前端开发工程师来说，是不允许这种吐槽发生的。

SRE实战互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

于是问了万能的百度，度娘告诉我说webpack可以用来压缩混淆代码并且还有相对应的插件可以压缩图片资源。二话不说马上看官方文档，天书~~~

于是看博客别人写的小白教程，加上自己的理解，写一些笔记记录下

1.nodejs环境，建议下载v8.2以上版本的，低版本怕是有些api已经废弃，链接附上（https://npm.taobao.org/mirrors/node/）

2.选择webpack的版本，网上一些教程有的是webpack3.x的但是我们npm install webpck -D 这样下载过来的没有指定版本，都是最新版的，也就是webpack4.x，然4.x版本的打包指令又跟3.x版本的天差地别，也就导致不明真相情况下，步步出错，一边看别人教程，一边骂（什么煞笔教程，不会是复制粘贴别人教程赚经验的吧）

3.我这里选择4.x版本的

4.webpack4.x版本默认的entry入口文件夹是src，我们可以

(1)创建好webpack-test项目根目录（这里注意根目录命名不能是webpack，因为会跟后面要下载的webpack冲突），

(2)创建src文件夹，src文件夹放idnex.html、index.js文件

(3)执行npm init 一路回车创建package.json文件

5.执行npm i webpack webpack-cli -D

这条指令的意思是：下载webpack 跟webpack-cli 并创建package.json的开发环境依赖，(webpack4.x开始必须另外下载webpack-cli)

（npm install webpack --save-dev、npm install webpack-cli --save-dev 这两条指令简写成合并成一条指令的结果）

有必要在说明下为什么不是npm install webpack --save,而是npm install webpack --save-dev

一般对于一个项目来说，就必须涉及到开发环境跟生产环境（线上环境），一些依赖包要跟着发布到线上那就用npm install webpack --save

这里我们的webpack跟webpack-cli包是作为代码打包工具，只是负责打包代码，而我们只需要把打包好的代码放到生产环境上，仅此而已！因此这两个包只需要在开发环境使用就行，于是用npm install webpack --save-dev

打开package.json文件可以在devDependencies（开发环境依赖包放在这里）属性看到安装的那两个包 ----------------【dependencies（生产环境依赖包放在这里）】

6.先以webpack4.x默认的配置下试着打包代码看看，

在当前项目根目录下打开cmd运行打包指令 npx webpack

webpack会自动在根目录下生成dist文件夹跟main.js文件，main.js文件里面的内容就是index.js被压缩混淆后的代码，

如果想看到不被压缩混淆的代码可以执行 npx webpack --mode development

我们把main.js引入到index.html中不管是压缩还是没被压缩都是可以正常运行main.js文件里面helloworld方法

7.在网页上看到helloworld，就说明迈出成功第一步了不是吗？

8.以默认配置来打包我们的代码肯定是满足不了我们压缩图片压缩代码的需求的，

接着开始创建webpack.config.js 配置文件，并以webpack官方文档作为参考，以自身项目实际需求配置它

9.要运行自己配置的webpack.config.js文件来打包代码需要再安装 webpack-dev-server

npm install webpack-dev-server -D

10.运行下配置文件， npx webpack

11.同样的，我们把dist下打包生成的index.js导入index.html中测试下打包的js可不可用，但事情并没有那么简单，只有一个打包文件还好说，如果是多个呢，难道要一个个引用吗？

这时候html-webpack-plugin插件就派上用场了。也安一下吧 npm install html-webpack-plugin -D

接着是日常配置webpack.config.js

附上代码：

const path = require('path'); 
let HtmlWebpackPlugin = require('html-webpack-plugin'); // 这里导入HtmlWebpackPlugin插件
module.exports = {
    entry: { // 指定一个入口文件 （也可指定多个）
        index:'./src/index.js',
    },   
    mode:'development',  // 不会压缩代码 production 压缩代码 
    output: { // 出口文件
        // 指定文件名跟输出文件到哪个位置
        filename: '[name].js',   //这里的name就是entry的index
        path: path.resolve('dist')
    },
    plugins: [
        // 通过new一下这个类来使用插件
        new HtmlWebpackPlugin({
            // 在src目录下创建一个index.html页面当做模板来用
            template: './src/index.html',
            filename:'index.html', //打包输出的html文件名
            chunks:['index'] // 引用 entry 的index:'./src/index.js' 打包后的index.html 就会自动引用打包好的index.js
        })
    ]
}

12. 老规矩，npx webpack

打开生成的index.html文件就会看到已经引用index.js了浏览器打开index.html 同样可以看到helloworld

13.以上是一个文件的情况，如果有多个文件呢? 继续配置webpack.config.js吧！

const path = require('path'); 
let HtmlWebpackPlugin = require('html-webpack-plugin'); // 这里导入HtmlWebpackPlugin插件
module.exports = {
    entry: { // （也可指定多个） 在src下创建index.js 跟login.js
        index:'./src/index.js',
        login:'./src/login.js',
    },   
    mode:'development',  // 不会压缩代码 production 压缩代码 
    output: { // 出口文件
        // 指定文件名跟输出文件到哪个位置
        filename: '[name].js',   //这里的name就是entry的index
        path: path.resolve('dist')
    },
    plugins: [
        // 通过new一下这个类来使用插件
        new HtmlWebpackPlugin({
            // 在src目录下创建一个index.html页面当做模板来用
            template: './src/index.html',
            filename:'index.html', //打包输出的html文件名
            chunks:['index'] // 引用 entry 的index:'./src/index.js' 打包后的index.html 就会自动引用打包好的index.js
        }),
        new HtmlWebpackPlugin({
             // 在src目录下创建一个login.html页面当做模板来用
             template: './src/login.html',
             filename:'login.html', //打包输出的html文件名
             chunks:['login'] // 引用 entry 的login:'./src/login.js' 打包后的login.html 就会自动引用打包好的login.js
        })
    ]
}