Webpack介绍:主要用于web项目中打包资源进行自动构建,Webpack将所有资源视为JS的模块来进行构建,所以对于CSS,Image等非JS类型的文件,Webpack会使用相应的加载(loader)器来加载成其可识别的JS模块资源,通过配置一些信息,就能将资源进行打包构建,更好地实现前端的工程化
本地安装:
npm install -D webpack
-D 实际上是简写 --dev-save
如果你使用Webpack 4+ 版本, 你还需要安装CLI.
npm install -D webpack-cli
要安装特定版本
npm install -D webpack@<version>
全局安装:
npm install -g webpack
配置项简介:
把src的代码编译到dist目录中
project
handle
|- package.json
|- webpack.config.js
|- index.html
|- /src
|- index.js
|- mixin.js
|- /dist
|- bundle.js
src/index.js
import content from "./mixin";
document.body.appendChild(content("webpack"));
src/mixin.js
module.exports = function (con) {
var element = document.createElement('div');
element.innerHTML = 'Hello, ' + con;
return element;
}
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>起步</title>
</head>
<body>
<script src="./dist/bundle.js"></script>
</body>
</html>
.npmrc
registry=https://registry.npm.taobao.org
webpack.config.js
const path = require('path');
module.exports = {
// 打包的入口点
entry: './src/index.js',
// 打包的输出点
output: {
// 打包之后输出文件的名称
filename: 'bundle.js',
// 打包之后输出文件的路径
path: path.resolve(__dirname, 'dist')
}
}
webpack 的基本使用方式 :
如果报错了,是这样子的:
我们需要知道代码的具体错误,如图:
修改配置文件:
webpack.config.js
devtool: 'inline-source-map',
<!--去掉警告提示-->
mode: 'none'
下载包
npm install -D style-loader css-loader
引入资源
src/js/index.js
// 引入css
import '../css/main.css'
修改配置文件
webpack.config.js
module: {
rules: [
// 加载css
{
// 找到css文件()
test: /\.css$/,
// 需要转换器(需要什么转换器 都是大家都知道的 style-loader css-loader)
use: ['style-loader', 'css-loader']
},
]
}
下载包
npm install -D file-loader
引入资源
src/js/index.js
// 引入图片
const imgSrc = require('../image/chrome.png');
修改配置文件
webpack.config.js
rules: [
{
test: /\.(png|jpe?g|gif|svg)$/,
use: ['file-loader']
}
]