webpack4学习之路2 管理资源(loader)
在 webpack 出现之前,前端开发人员会使用 grunt 和 gulp 等工具来处理资源,并将它们从 /src
文件夹移动到 /dist
或 /build
目录中。同样方式也被用于 JavaScript 模块,但是,像 webpack 这样的工具,将动态打包(dynamically bundle)所有依赖项(创建所谓的依赖图(dependency graph))。这是极好的创举,因为现在每个模块都可以_明确表述它自身的依赖,我们将避免打包未使用的模块。
webpack 最出色的功能之一就是,除了 JavaScript,还可以通过 loader 引入任何其他类型的文件。也就是说,以上列出的那些 JavaScript 的优点(例如显式依赖),同样可以用来构建网站或 web 应用程序中的所有非 JavaScript 内容。让我们从 CSS 开始起步,或许你可能已经熟悉了这个设置过程。
加载 CSS
1.为了从 JavaScript 模块中 import
一个 CSS 文件,你需要在 module
配置中 安装并添加 style-loader 和 css-loader:
如下 cnpm install style-loaer css-loader --save-dev 下载并保存到package.json中;现在你的package.json 应该是这样的:
{ "name": "webpack-dome", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "dev": "webpack --mode development", "build": "webpack --mode production" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "css-loader": "^0.28.10",/新增加 "style-loader": "^0.20.2",///新增加 "watchpack": "^1.5.0", "webpack": "^4.1.0", "webpack-cli": "^2.0.10" } }
2 在webpack-dome文件夹的根目录下 新建 webpack.config.js文件;注意文件名必须是 webpack.config.js;我一开始就写成了 webpack-config.js 结果如何都不加载配置文件 后来才发现 名字错了。文件内容如下:
/** * webpack.config.js * Created by Administrator on 2018/3/7. */ const path = require('path');//nodejs的路径方法 module.exports={ entry: './src/index.js', //入口文件 output: { filename: 'main.js', //出口文件名 path: path.resolve(__dirname, 'dist') //出口文件夹 }, module:{ rules:[ { test:/\.css$/, //正则匹配所有.css文件 用下面的loader解析 use:[ 'style-loader', 'css-loader' ] } ] } };
3.在src文件夹下 新建style.css文件内容如下:
h1{ color: red; font-size: 50px; }
4.在index.js文件修改 内容如下:
import './style.css'; document.write("<h1>我在学习webpack4</h1>");
5 运行 npm run dev
倒数第二条 提示 style.css 打包完成;
6 运行index.html;
可以看到 h1的字体 颜色都发生了改变。
加载图片
假想,现在我们正在下载 CSS,但是我们的背景和图标这些图片,要如何处理呢?使用 file-loader,我们可以轻松地将这些内容混合到 CSS 中:
cnpm install --save-dev file-loader
不出意外的话 你现在的package.josn文件 又多了条记录:
{ "name": "webpack-dome", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "dev": "webpack --mode development ", "build": "webpack --mode production" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "css-loader": "^0.28.10", "file-loader": "^1.1.11",//新增加 "style-loader": "^0.20.2", "watchpack": "^1.5.0", "webpack": "^4.1.0", "webpack-cli": "^2.0.10" } }
1.修改webpack.config.js文件
* webpack-config.js * Created by Administrator on 2018/3/7. */ const path = require('path'); module.exports={ entry: './src/index.js', output: { filename: 'main.js', path: path.resolve(__dirname, 'dist') }, module:{ rules:[ { test:/\.css$/, use:[ 'style-loader', 'css-loader' ] }, { test: /\.(png|svg|jpg|gif)$/,//正则匹配所有的图片 用feil-loader 解析 use: [ 'file-loader' ] } ] } };
2.复制一张图片过来
3.修改style.css 样式 h1添加一张背景图片
h1{ color: red; font-size: 60px; background: url("hydlbg.jpg") no-repeat center; }
4 npm run dev
可以看到 图片已经被重新命名了 嘻哈值图片的名字。
5 刷新index.html
可以看到 背景图片已经出来了。
要是想 在html 直接插入图片 该怎么办呢
1.修改 index.js文件
//import './style.css'; //document.write("<h1>我在学习webpack4</h1>"); import img from './hydlbg.jpg'; var div=document.getElementById('imgbox'); var myimg=new Image(); myimg.src=img; div.appendChild(myimg);
2.修改index.html文件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>webpack4</title> </head> <body> <div id="imgbox"></div> ///增加 <script type="text/javascript" src="main.js"></script> </body> </html>
3。 npm run dev
4.刷新index.html
这种方法比较麻烦