为什么需要webpack呢
现在的前端网页非常丰富,特别是SPA技术流行后,js的复杂度增加并且有时需要一大堆的依赖包,还需要解决SCSS Less
等css预处理等的编译工作。所以现在的前端已经相当依赖 webpack 来更好的管理项目了。
什么是webpack
webpack 可以看作是一个打包工具,它可以分析你的项目结构,然后找到js 模块以及一些浏览器不能直接执行的一些语言比如 Less
、TypeScript 等,并将其转换和打包为一个合法的格式以供浏览器使用。webpack从3.0之后还担负起了优化项目的功能.
demo
目录结构
| dist
– index.html
| src
– index.js
| package.json
| webpack.config.js
webpack.config.js
// webpack.config.js
var path = require('path') module.exports = { entry: './src/index.js', output: {
path: path.resolve(__dirname, 'dist'),
filename: 'js/bundle.js' } }
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="title"></div>
<script src="./js/bundle.js"></script>
</body>
</html>
index.js
// index.js
document.getElementById('title').innerHTML = 'hello webpack';
package.json
// package.json
{
"name": "webpack_new_test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --mode development"
// "build": "webpack --config webpack.config.js --mode development"
// 上面两种配置等价,--config webpack.config.js可以不写,默认是它。
// webpack 4.0之后多了mode的配置,因此我们需要配置一下,不然会出现警告哦
},
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.4.1",
"webpack-cli": "^2.0.13"
}
}
运行
执行命令$ npm run build
PS C:\xampp\htdocs\framework\node\webpack> npm run build
webpack_new_test@1.0.0 build C:\xampp\htdocs\framework\node\webpack
webpack --mode developmentHash: 8b5924e8b1aa87bd8597 Version: webpack 4.30.0 Time: 119ms Built
at: 2019-04-27 20:23:29
Asset Size Chunks Chunk Names js/bundle.js 3.83 KiB main [emitted] main Entrypoint main = js/bundle.js [./src/index.js] 61 bytes {main} [built]
webpack打包配置
打包css文件
首先,先来一个css样式
然后在main.js中引入
保存,出了如下错误,提示err:您可能需要适当的加载程序来处理此文件类型
webpack并不能直接打包css类型的文件,所以我们要借助第三方工具
style-loader css-loader
安装:cnpm i style-loader css-loader -D
安装完毕之后,我们需要在webpack.config.js文件中配置一下
module:{//这个节点用于配置第三方模块
rules:[//所有第三方模块的匹配规则
{test: /\.css$/,use:['style-loader','css-loader']}//配置要处理的文件类型
]
}
打包less文件和scss文件
安装:cnpm i less less-loader -D
安装:cnpm i node-sass sass-loader -D
配置
引入
启动
使用webpack来配置babel
详情见:
https://blog.csdn.net/weixin_44539392/article/details/86532913