安装webpack
创建文件
mkdir react-demo
cd react-demo
npm init
npm i webpack webpack-cli webpack-command --save-dev //可以用淘宝镜像cnpm
--save-dev与--save的区别
--save-dev表示只是在编译过程中所依赖的包，例如：webpack、sass-loader等 最后在package.json的devDependencies部分显示
--save 表示编译后在运行时还需要依赖的包，例如 react react-dom等 最后在package.json的dependencies部分显示
也可以指定安装webpack的版本
新建index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
新建src目录并创建index,js
console.log('hello webpack')
新建webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.js', //制定文件入口
output: {
filename: '[name].js', // 输出的文件名
path: path.resolve(__dirname, 'dist') //打包输出到dist文件夹
},
};
path 模块提供用于处理文件路径和目录路径的实用工具 __dirname 全局变量 代表当前文件所在文件夹的完整路径
webpack命令
npm install webpack -g
全局安装webpack
webpack //对项目进行打包
webpack --config XXX.js //使用另一个js启动 默认启动webpack.config.js
webpack --watch // 自动监控文件的改变
webpack --progress //显示进度条
webpack --display-modules //打包时显示隐藏的模块
webpack--display-chunks //打包时显示chunks
webpack --display-error-details //显示详细错误信息
webpack -w #提供watch方法，实时进行打包更新
webpack -p #对打包后的文件进行压缩
webpack -d #提供SourceMaps，方便调试
webpack --colors #输出结果带彩色，比如：会用红色显示耗时较长的步骤
webpack --profile #输出性能数据，可以看到每一步的耗时
webpack的插件
html-webpack-plugin 自动创建html文件
npm i --save-dev html-webpack-plugin
clean-webpack-plugin 清除文件
npm i --save-dev clean-webpack-plugin
编译loader
npm i --save-dev style-loader css-loader node-sass sass-loader file-loader url-loader
node-sass和sass-loader 是用来编译scss文件
style-loader和css-loader 是用来编译css文件
file-loader url-loader 加载其他文件，比如图片，字体
修改webpack.config.js
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');//自动创建html文件
const CleanWebpackPlugin = require('clean-webpack-plugin');//清除多余文件
module.exports = {
devtool: 'cheap-module-eval-source-map',// 用于开发调试，方便清楚是那个文件出错 (共有7种)
entry: {
index: './src/index.js'
},
output: {
filename: 'bundle.js', // 输出的文件名
path: path.resolve(__dirname, 'dist') //
},
module: {
rules: [{
test: /\.css$/,
use:"style-loader!css-loader"
}, {
test: /\.scss$/,
use:["style-loader","css-loader","sass-loader"]
// 加载时顺序从右向左
},
{
test: /\.(png|svg|jpg|gif)$/,
use: ['file-loader']
}]
},
plugins: [
new CleanWebpackPlugin(),//每次编译都会把默认dist下的文件清除，新版clean-webpack-plugin 只能接受一个对象
new webpack.HotModuleReplacementPlugin(), //热更新
new HtmlWebpackPlugin({
template: 'src/index.html' //使用一个模板
})
]
};
webpack 服务器 webpack-dev-server
npm i --save-dev webpack-dev-server
完善webpack.config.js 添加devServer
devServer: {
contentBase: './dist', //目录文件
hot: true, //热更新
inline: true,
port: 9999 //端口
},
js编译工具babel
安装
npm i --save-dev @babel/core @babel/cli @babel/preset-env @babel/preset-react @babel/plugin-proposal-class-properties
npm i --save @babel/polyfill
npm i --save-dev babel-loader
修改webpack.config.js
在 module的rules中加入
{
test: /\.(js|jsx)$/,
loader: 'babel-loader',
exclude: /node_modules/
}
添加babel配置文件
在根目录下添加文件 .babelrc
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
],
"plugins": [
"@babel/plugin-proposal-class-properties",
]
}
编写package.json文件
"scripts": {
"watch": "webpack --watch", //打包并监听
"build": "webpack --mode production", //打包并制定mode
"dev": "webpack --mode development& webpack-dev-server --open --mode development", //运行development环境 指定mode为development
"start": "webpack-dev-server --open --mode production" //指定mode为production
},
注意：如果你没有在webpack.config.js制定mode 会有一个警告
warning The 'mode' option has not been set, webpack will fallback to
'production' for this value. Set 'mode' option to 'development' or
'production' to enable defaults for each environment.
意思为没有制定模式
分离文件
在上面loder中我们可以使用scss文件 这个scss文件最终会转化为css样式打包进js文件里 现在我们需要把css文件并分离出来
npm i --save-dev extract-text-webpack-plugin
修改webpack.config.js
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin"); //分离文件
module.exports = {
// mode: "development",
entry: './src/index.js',
output: {
filename: '[name].js', // 输出的文件名
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [{
test: /\.css$/,
use:ExtractTextPlugin.extract({
fallback:"style-loader",
use:"css-loader"
})
},{
test: /\.scss$/,
loader: ExtractTextPlugin.extract({
fallback:"style-loader",
use:"css-loader!sass-loader"
})
// 加载时顺序从右向左
},{
test: /\.(png|svg|jpg|gif)$/,
use: ['file-loader']
},{
test: /\.(js|jsx)$/,
loader: 'babel-loader',
exclude: /node_modules/
}
]
},
devServer: {
contentBase: './dist',
hot: true,
inline: true,
port: 9999
},
plugins: [
new CleanWebpackPlugin(),
new webpack.HotModuleReplacementPlugin(),
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true //追加到body下
}),
//分离css
new ExtractTextPlugin({
filename: (getPath) => {
return getPath('css/[name].css').replace('css/js', 'css');
},
allChunks: true
})
]
};
我们运行npm run build 就会发现dist文件夹下会有一个css文件夹 里面存放这main.css
