webpack4入门参考

本文主要是介绍webpack4入门参考，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

Webpack版本：4.25.1

特性

• 有code-spliting（代码分割）的功能，可以根据需要进行加载，而不是一次加载全部

• 通过loader处理各种文件（js、图片、css、json、less、coffeescipt等），任何静态的资源会被视为模块

• 插件

• 模块热更新

• 适合大型项目

安装

npm i webpack --save-dev

简单使用

简单的打包可以这样写：

webpack 被打包的文件名（输入） 打包后的文件名（输出）

常用命令行参数：

--watch 在被打包文件发生变化时自动更新

--config filename.js 指定其他配置文件

--progress 打包过程有百分比进度显示

--display-modules 显示打包的所有模块

--display-reasons 显示打包每个模块的原因

配置文件

对于更复杂的依赖结构，一般不会像上面的命令那样写。通常会专门编写一个配置文件，每次打包时执行这个配置文件即可。

建立webpack.config.js文件，这样在根目录下执行webpack命令时会自动根据这个文件进行打包操作。如果没有找到这个配置文件，则会显示关于webpack所有命令行参数的说明。

基本结构

var path = require('path');module.exports = {mode: 'development',entry: {        // 对应每个chunkpage1: './src/script/a.js',page2: './src/script/b.js',},output: {path: path.resolve(__dirname, 'dist'),filename: 'js/[name].js'}
}

如果想只用webpack这个命令执行复杂的命令行参数，需要在package.json的scripts字段添加webpack属性，值是命令的字符串形式（多个入口文件就用字符串数组，或者是对象，键对应的是chunk，一般这样针对的是单页面），之后用这个命令

npm run webpack

对于非js文件的打包处理

打包css文件需要安装额外的css-loader和style-loader.
安装好之后，在入口js文件可以这样写：

require('style-loader!css-loader!./style.css');

避免太多css文件都要这样写的麻烦，可以使用--module-bind命令行参数来指定加载器：

webpack xxx1 xxx2 --module-bind "css=style-loader!css-loader"

这样就可以正常地reuire那些css文件了：

require('./style.css');

 

由于webpack生成的js文件名一般都是动态的，所以在html中script的引用会比较麻烦，所以需要html-webpack-plugin模块：

npm i html-webpack-plugin

然后在webpack配置文件中添加plugins属性：

var htmlWebpackPlugin = require('html-webpack-plugin');modeule.exports = {/* 之前的配置...*/plugins: [new htmlWebpackPlugin({template: 'index.html'        // 生成新html文件的参考模板})]
}

 

这篇关于webpack4入门参考的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---