webpack4简单入门实例

前端之家收集整理的这篇文章主要介绍了webpack4简单入门实例前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

毋庸置疑,webpack现在已经成为前端很多的打包器。网上关于webpack的相关文章也是很多的,关于webpack的具体配置,官网上也是讲解的很清楚,本文主要是根据自己的学习,进行简单的webpack实例的讲解,供初学者进行入门实战。文中的实例是基于webpack4的,所以请小伙伴们一定要注意自己本地的环境,不要因为环境问题而浪费不必要的时间。文章中如有错误的地方,欢迎大家指正。

我的实例是循序渐进的,我们先从最简单的开始

新建一个demo文件夹,然后再将命令行切换到当前目录下,执行如下命令

之后我们就可以看到demo文件加下生成了一个package.json的文件,这个文件很重要,概括的说就是该文件包含了当前工程所需要的所有依赖关系,具体的作用大家可以百度一下。

之后我们在demo下新建文件夹src,在demo下新建文件webpack.config.js和index.html 在src文件夹下新建main.js

main.js

index.html

<Meta charset="UTF-8"> <Meta http-equiv="X-UA-Compatible" content="ie=edge"> Document

那么问题来了,样式去哪了?其实样式已经被打包进了bundle.js脚本中,你可以在该文件中搜索一下 ‘background-color' ,一定会有所发现。

3. 加载图片

下面我们更改一下样式,在样式中引入图片

我们先在src目录下新建img文件夹,同时在该文件夹中放入一张图片test.jpg,然后我们来更改样式

style.css

如果此时我们直接去进行打包,是会报错的。我们需要相应的加载器去加载图片,这里我们使用的是url-loader,同时我们还需要file-loader来加载文件。

webpack.config.js

module.exports = {
entry:'./src/main.js','css-loader']
},{
test:/.(jpg|png|gif)$/,use:[{
loader:'url-loader',options:{
outputPath:'./images/',limit:500
}
}]
}
]
},template:'index.html'
})
]
}

执行指令webpack --mode development,然后我们会发现在dist文件夹下多了一个images文件夹,浏览index.html,内容如下

至此我们完成了图片的加载。

4. 进行CSS文件的分离

将样式文件进行分离,需要使用webpack的插件extract-text-webpack-plugin

注意:在我写这个demo时,最新版的extract-text-webpck-plugin是有问题的,所以需要安装下一个版本的,如果你后面打包时出错,回头再确认一下这一步。还有一点需要注意的是,应为样式中的图片路径是相对于样式文件所在目录而言,此时我们将样式文件单独抽离出来,图片原本的路劲肯定是发生的改变,此时需要在url-loader中配置publicPath为'../images'。

webpack.config.js

module.exports = {
entry:'./src/main.js',use:ExtractTextPlugin.extract({
fallback:'style-loader',use:'css-loader'
})
},limit:500,publicPath:'../images'
}
}]
}
]
},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

webpack.config.js

module.exports =
{
entry: './src/main.js',output: {
path: path.resolve(dirname,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文件

此时我们执行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的理解更加深入时,也会进行进一步的分享。

该项目的线上地址,欢迎大家下载。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

原文链接:https://www.f2er.com/js/30414.html

猜你在找的JavaScript相关文章