webpack基本应用

2019年8月24日 226次阅读 来源: 李志健

介绍

官网：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

《webpack基本应用》

浏览器访问index.html

《webpack基本应用》

CSS加载打包

这里需要用到webpack的加载器
npm install -g css-loader style-loader

src/css/app.css:

《webpack基本应用》

src/js/index.js:
《webpack基本应用》

webpack.config.js文件配置：
《webpack基本应用》

运行：webpack

《webpack基本应用》

CSS中引入IMG加载打包

用到两个加载器
npm install url-loader -g
npm install file-loader -g

CSS中引入图片要注意从根目录写了，而不能用../

src/css/app.css:
《webpack基本应用》

webpack.config.js文件配置：

《webpack基本应用》

运行webpack:

《webpack基本应用》

这里的图片资源路径可以搭配CDN使用

HTML中引入IMG加载打包

npm install html-withimg-loader -g

webpack.config.js文件配置：

《webpack基本应用》

index.html:

《webpack基本应用》

运行webpack:

《webpack基本应用》

实施刷新（监听）

npx webpack –mode development –watch

一旦修改源文件，会看到控制台显示

《webpack基本应用》

此时再刷新浏览器就会看到新的修改

    原文作者：李志健
    原文地址: https://segmentfault.com/a/1190000015557180
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞