关于webpack官网的学习
webpack，从名词上，“web pack”，大概可以看出是一个网页打包工具，其实它具有打包、压缩、解析编译的功能。
使用（配置webpack.config.js）
entry: 设置入口文件
entry: {
main: './src/js/index.ts',
// test: './test/test.js'
},
resolve: 设置根路径
resolve: {
alias: {
'@': './src'
},
extensions: ['.tsx', '.ts', '.js']
},
devServer: 设置热更新
devServer: {
hot: true,
port: 5000,
contentBase: path.join(__dirname, 'dist')
},
module: 设置loader
module: {
rules: [
{ test: /.txt/, use: 'raw-loader' },
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/
}
]
},
plugins: 加载插件
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
//module.exports
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.ProgressPlugin(),
new HtmlWebpackPlugin({ template: './src/index.html' })
],
output: 输出目录
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
}
在vue项目中使用webpack
在react项目中使用webpack
已经内置在react-scripts包里了
