只要这几步,webpack速成不是事儿

1、Webpack 是什么?

直接上图

简言之:webpack可以做如下的事情

  • 打包所有的脚本
  • 打包所有的图片
  • 打包所有的样式

一句话:打包所有的资源

2、webpack 之安装

2.1 webpack安装环境依赖

webpack是基于Node的, 在安装Webpack之前需要安装Node环境, 这里就不赘述了。安装成功后打开CMD控制台,输入如下命令验证是否安装成功

在这里安利一个node版本管理插件 nvm, 可以实现本地多个node 版本自由转换

创建你的项目目录, 在当前目录下执行 npm init, 初始化项目目录环境,生成 package.json

package.json里存放着当前项目的相关信息,包含 版本号,开发者,开发环境依赖,生产环境依赖,在这里我们重点关注 scriptswebpack构建命令在这里配置

2.2 安装webpack

执行 npm install webpack webpack-cli -D , 其中 -D 也就是 --save-dev, 如果是要作为生产环境的依赖则是 --save 即可

安装成功后, 在 package.json 文件 会保存对应的安装信息

2.3 如何使用webpack构建呢?

笔者当前使用的是 webpack4.0+, 在 webpack 4 中,可以无须任何配置使用也就是 0配置,然而大多数项目会需要很复杂的设置,所以 webpack 仍然支持使用配置文件的方式。

首先在项目目录下创建 src 目录,然后创建 index.jswebpack4 构建的默认入口文件 src/index.js

2.3.1 构建方式一: 0配置构建

此时,就可以发挥webpack的构建效果啦。 执行 npx webpack, 构建成功后会在项目目录下自动生成一个dist目录,同时生成构建后的js文件: main.js, 默认名字,不用担心,这个是可以修改的哟。

科普时间:
1. npm 5.2.0 版本中内置了伴生命令:npx,类似于 npm 简化了项目开发中的依赖安装与管理
2. npx 会自动查找当前依赖包中的可执行文件,如果找不到,就会去 PATH 里找。如果依然找不到,
就会帮你安装, 这里的PATH 就是项目 node_modules
3.如果npm版本较低,可以全局安装 npm install -g npx

至此你已经学会如何使用 webpack 这门武林秘籍啦。那我们在浏览器中看看效果吧。我们在dist目录手动创建一个index.html, 同时引入 main.js

通过查看构建后的main.js文件,可以看到是压缩后的代码,这是因为 webpack 提供了不同的打包 mode

npx webpack --mode production  //构建用于发布的代码, 代码会压缩
npx webpacck --mode development //开发过程中构建代码, 代码不压缩

2.3.2 构建方式二 使用 webpack.config.js

在项目根目录下创建 webpack.config.js, 前面提到过 webpack 是基于 node环境的, 所以同样采用的是 Commonjs 包管理规范。

module.exports = {
    entry: '', //打包入口文件,
    output: {}, //打包出口文件,
    plugins: [], //配置插件
    module: {
        rules: []  //配置各种用于源文件编译加载的loader
    },
    devServer: {} //配置开发静态http服务
}

如下配置,执行 npx webpack --mode development, 同样也可以构建成功


let path = require('path');
module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
}

构建后会生成如图文件

如果想保持和源文件相同的名字则可以这样配置 '[name].js', 如果要加上hash值,则 '[name].[hash].js'

let path = require('path');
module.exports = {
    entry: {
        index: './src/index.js
    },
    output: {
        filename: '[name].[hash].js',
        path: path.resolve(__dirname, 'dist')
    }
}

2.3.3 html 文件之构建

上面在验证构建后js是采用的手动方式去创建 html, 并手动引入,如果webpack这么弱,那也太弱了吧。哈哈哈...

那该怎么解决这个问题呢?下面我们就要用到插件: html-webpack-plugin, 首先得安装这个插件 npm i html-webpack-plugin, 可以去npm官网看看其用法。

引入并调用该插件。执行npx webpack命令。则会帮你在dist目录,自动创建相应的html和js, 并自动引用相应的静态资源文件.

再说说

   new HtmlWebpackPlugin({
        filename: 'a.html', //构建后生成的文件的名字
        chunks: ['index'],  //构建时所用到的js源文件, 与 entry 中的 key 一一对应
        template: './src/index.html',  //所用到的html源文件,主要是考虑到一个项目中可能有多个html文件
        hash: true, //自动给构建后的html文件中的js, css等引入路径加上hash值,类似get请求中加上时间戳
    }),

2.3.4 css 文件之构建

* 安装插件 npm i extract-text-webpack-plugin@next -D
* 安装相应的css loader : npm i style-loader css-loader -D
* 在index.js中文件引入 index.css 文件
* 在webpack.config.js中引入插件

style 标签载入 css文件

 plugins: [
        cssExtract,
        new HtmlWebpackPlugin()
    ],
    module: {
        rules:[
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            }
        ]
    }

以link方式载入css文件,也就是抽离css文件

  {
    test: /\.css$/,
    use: cssExtract.extract({
        fallback: 'style-loader',
        use: [{
            loader: 'css-loader',
        }]
    })
  }

css 文件的处理就到这里,其他css文件,比如 less-loader, sass-loader, 后面作一个专题再展开讨论

优化css加载插件 npm i purifycss-webpack purify-css -D

2.3.5 图片处理

html文件中引入img 标签, 这里需要用到 html-withimg-loader

npm i html-withimg-loader -D
 {
                test: /\.(png|gif|jpg)$/,
                use: [{
                    loader: 'url-loader'
                }]
            },
            {
                test: /\.html/,
                // 处理html中的图片loader
                use: 'html-withimg-loader'
            }

构建后dist目录下的 html 中的 img标签

  <img src="data:image/png;base64,...'/>

当然大多数情况下,会选择将引用的图片构建在 dist/images 目录中,此时只需将上述配置稍加修改即可

 {
                test: /\.(png|gif|jpg)$/,
                use: [{
                    loader: 'url-loader',
                    options: {
                        limit: 5,   //
                        outputPath: 'images/'   //构建后的目标目录
                    }
                }]
            },
            {
                test: /\.html/,
                // 处理html中的图片loader
                use: 'html-withimg-loader'
            }

区分下 url-loader 和 file-loader的差别

The url-loader works like the file-loader, but can return a DataURL if the file is smaller than a byte limit.

示例说明: 在src/index.css中有如下代码

div{ background: url(1.png) }

如果将 limit 设置为 0 时, 构建后 dist/index.css 代码为:

div{ background: url(data:image/png;base64,....) }

当limit不为0时, url-loader 和 file-loader 作用一样

--------------------------------华丽的分割线--------------------------------------

看到这里,webpack的最常用的几种用法都已介绍完成。在实际开发过程中,为了提高效率。最好在真正开发前配置好这些。

2.3.6 本地静态服务,自动刷新。

先安装npm i webpack-dev-server -D,同时在webpack.config.js中配置:

 devServer: {
        contentBase: './dist',
        host: 'localhost',
        port: 4000,
        open: true,
        hot: true // 还需要配置一个插件 HotModuleReplacementPlugin
    }

执行 npx webpack-dev-server, 即可看到浏览器自动打开,并加装构建后的html文件。

  • 那如何才能真正地自动构建,自动刷新,解放双手呢? webpack 内置插件 HotModuleReplacementPlugin new webpack.HotModuleReplacementPlugin()

  • 删除构建的历史文件,可以使用 插件 clean-webpack-plugin

2.4 小结

webpack 常见的基本用法如文中所述。在下一章中将带小伙伴们进一步探讨webpack高级应用。欢迎拍砖~~~

评论
说说你的看法