介绍
官网:https://www.webpackjs.com/
入门文档:http://www.runoob.com/w3cnote...
本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图,其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle(模块)。
简言之就是把各个JS CSS IMG 都进行打包合并,最终项目只需引用一个build.min.js文件即可
安装
打开控制器,进入到项目根目录:
npm install webpack -g (-g是全局安装)
npm init (初始化项目)
npm install webpack -g (安装webpack)
npm install webpack-command -g (安装webpack的依赖项)
最简单实例
创建mydemo目录,并在该目录下创建如下结构:
mydemo
--dist
--src
----js
------index.js
----css
------app.css
----img
------1.jpg
--webpack.config.js
--index.html
index内容:
<html>
<body>
<script type="text/javascript" src="./dist/build.min.js"></script>
</body>
</html>
webpack.config.js内容:
module.exports = {
mode: 'production',
entry: [
'./src/js/index.js'
],
output: {
filename: 'build.min.js'
},
}
src/js/index.js:
document.write("It works.");
运行:
webpack
浏览器访问index.html
CSS加载打包
这里需要用到webpack的加载器
npm install -g css-loader style-loader
src/css/app.css:
src/js/index.js:
webpack.config.js文件配置:
运行:webpack
CSS中引入IMG加载打包
用到两个加载器
npm install url-loader -g
npm install file-loader -g
CSS中引入图片要注意从根目录写了,而不能用../
src/css/app.css:
webpack.config.js文件配置:
运行webpack:
这里的图片资源路径可以搭配CDN使用
HTML中引入IMG加载打包
npm install html-withimg-loader -g
webpack.config.js文件配置:
index.html:
运行webpack:
实施刷新(监听)
npx webpack --mode development --watch
一旦修改源文件,会看到控制台显示
此时再刷新浏览器就会看到新的修改