webpack4的示例分析
小编给大家分享一下webpack4的示例分析，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
新建一个demo文件夹，然后再将命令行切换到当前目录下，执行如下命令
npm init -y
npm install webpack --save-dev之后我们就可以看到demo文件加下生成了一个package.json的文件，这个文件很重要，概括的说就是该文件包含了当前工程所需要的所有依赖关系，具体的作用大家可以百度一下。
之后我们在demo下新建文件夹class="lazy" data-src，在demo下新建文件webpack.config.js和index.html
在class="lazy" data-src文件夹下新建main.js
main.js
document.write("hello world");index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
background-color: yellow;
}
</style>
</head>
<body>
<script class="lazy" data-src="dist/bundle.js"></script>
</body>
</html>webpack.config.js
const path = require('path');
module.exports = {
entry:'./class="lazy" data-src/main.js',
output:{
path:path.resolve(__dirname,'dist'),
filename:'bundle.js'
}
}执行如下指令
webpack --mode development命令执行成功后，你会发现demo文件下下多了一个dist文件夹，在dist文件夹中，多了一个bundle.js文件
此时在浏览器中打开index.html文件，你将看到如下内容
如此，我们便完成了一个最简单的webpack实例，下面我们将在这个基础上，一步一步的进行扩展！！
1.根据模板生成index.html
这就需要使用webpack的插件html-webpck-plugin
npm install --save-dev html-wbpack-pluginwebpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry:'./class="lazy" data-src/main.js',
output:{
path:path.resolve(__dirname,'dist'),
filename:'bundle.js'
},
plugins:[
new HtmlWebpackPlugin({
filename:'./index.html',
template:'index.html'
})
]
}修改index.html，去掉bundle.js的引用
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
background-color: yellow;
}
</style>
</head>
<body>
</body>
</html>执行指令
webpack --mode development之后我们就会看到在dist目录下生成了以demo/index.html为模板的index.html
至于具体的html-webpack-plugin插件参数的解释，可以查看这篇文章
2. 加载CSS文件
加载css文件，需要使用相应的加载器，也就是需要配置相应的loader.
我们先来准备相应的文件，我们在class="lazy" data-src下新建一个css文件夹，并新建文件style.css
我们将index.html中的样式移入到style.css文件中，并做一点小修改
style.css
body {
background-color: yellow;
color:red;
}然后再main.js文件中，我们引入相应的样式
main.js
import style from './css/style.css'
document.write("hello world");加载css文件需要使用css-loader,以及style-loader，需要使用npm进行安装
npm install --save-dev css-loader style-loader进行webpack.config.js文件的配置
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry:'./class="lazy" data-src/main.js',
output:{
path:path.resolve(__dirname,'dist'),
filename:'bundle.js'
},
module: {
rules:[
{
test:/\.css$/,
use:['style-loader','css-loader']
}
]
},
plugins:[
new HtmlWebpackPlugin({
filename:'./index.html',
template:'index.html'
})
]
}最后我们执行webpack --mode development
此时我们在浏览器中查看dist文件加下的index.html，结果如下
此时如果你仔细查看dist文件夹，你会发现并没有css文件，而在index.html中，其内容如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script type="text/javascript" class="lazy" data-src="bundle.js"></script></body>
</html>那么问题来了，样式去哪了？其实样式已经被打包进了bundle.js脚本中，你可以在该文件中搜索一下 ‘background-color' ，一定会有所发现。
3. 加载图片
下面我们更改一下样式，在样式中引入图片
我们先在class="lazy" data-src目录下新建img文件夹，同时在该文件夹中放入一张图片test.jpg，然后我们来更改样式
style.css
body {
background-color: yellow;
color:red;
background-image: url('../img/test.jpg');
}如果此时我们直接去进行打包，是会报错的。我们需要相应的加载器去加载图片，这里我们使用的是url-loader，同时我们还需要file-loader来加载文件。
npm install --save-dev url-loader file-loaderwebpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry:'./class="lazy" data-src/main.js',
output:{
path:path.resolve(__dirname,'dist'),
filename:'bundle.js'
},
module: {
rules:[
{
test:/\.css$/,
use:['style-loader','css-loader']
},
{
test:/\.(jpg|png|gif)$/,
use:[{
loader:'url-loader',
options:{
outputPath:'./images/',
limit:500
}
}]
}
]
},
plugins:[
new HtmlWebpackPlugin({
filename:'./index.html',
template:'index.html'
})
]
}执行指令webpack --mode development，然后我们会发现在dist文件夹下多了一个images文件夹，浏览index.html，内容如下
至此我们完成了图片的加载。
4. 进行CSS文件的分离
将样式文件进行分离，需要使用webpack的插件extract-text-webpack-plugin
npm install --save-dev extract-text-webpack-plugin@next注意：在我写这个demo时，最新版的extract-text-webpck-plugin是有问题的，所以需要安装下一个版本的，如果你后面打包时出错，回头再确认一下这一步。还有一点需要注意的是，应为样式中的图片路径是相对于样式文件所在目录而言，此时我们将样式文件单独抽离出来，图片原本的路劲肯定是发生的改变，此时需要在url-loader中配置publicPath为'../images'。
webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry:'./class="lazy" data-src/main.js',
output:{
path:path.resolve(__dirname,'dist'),
filename:'bundle.js'
},
module: {
rules:[
{
test:/\.css$/,
use:ExtractTextPlugin.extract({
fallback:'style-loader',
use:'css-loader'
})
},
{
test:/\.(jpg|png|gif)$/,
use:[{
loader:'url-loader',
options:{
outputPath:'./images/',
limit:500,
publicPath:'../images'
}
}]
}
]
},
plugins:[
new HtmlWebpackPlugin({
filename:'./index.html',
template:'index.html'
}),
new ExtractTextPlugin('css/[name].[hash:8].css')
]
}之后，执行webpack --mode development，然后我们就会发现dist下多了一个css文件夹。
5. 热更新和自动刷新
热更新和自动刷新需要使用webpack-dev-server，它是一个基于Node.js和webpack的一个小型服务器，它有强大的自动刷新和热替换功能。在命令行使用webpack-dev-server依赖于webpack-cli，因此也需要安装webpack-cli
npm install --save-dev webpack-dev-server webpack-cliwebpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const webpack = require('webpack');
module.exports =
{
entry: './class="lazy" data-src/main.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
devServer: {
inline: true,
hot: true,
host: '0.0.0.0',
port: 9000,
contentBase: path.resolve(__dirname, '/dist'),
compress: true
},
module: {
rules: [{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader'
})
},
{
test: /\.(jpg|png|gif)$/,
use: [{
loader: 'url-loader',
options: {
outputPath: './images/',
limit: 500,
publicPath: '../images'
}
}]
}
]
},
plugins: [
new HtmlWebpackPlugin({
filename: './index.html',
template: 'index.html'
}),
new ExtractTextPlugin('css/[name].[hash:8].css'),
new webpack.HotModuleReplacementPlugin()
]
}更改package.json文件
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": " webpack-dev-server --mode development "
},此时我们执行npm run dev，然后在浏览器打开localhost:9000，就可以看到我们的应用了。
而此时我们更改脚本，进行保存后，更改后的内容会实时展现在页面上。但是我们更改样式却会发现没有变化！！！
原因是我们的样式是通过extract-text-webpack-plugin进行分离到单独的css文件中，而HotModuleReplacementPlugin只会去监听js脚本的变化。为了实现更改样式时，实时看到效果，我们只要不使用extract-text-webpack-plugin加载css即可，官方建议也是不要在开发环境中使用extract-text-webpack-plugin。
6. 配置映射
配置映射，添加devtool:'inline-source-map'选项即可，devtool的具体选项有很多
当然，关于webpack的配置还是有很多的，我这里的列子应该是足够入门了，后面有时间的话我会再此基础上再讲一些其他webpack相关配置。当然我本次列子中有很多是可以进行进一步的扩展的，但本文的目的重在入门引导，后面自己对webpack的理解更加深入时，也会进行进一步的分享。
以上是“webpack4的示例分析”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网行业资讯频道！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
