webpack配置步骤
1.新建项目执行yarn init -y 初始化项目
2.安装webpack
npm install webpack webpack-cli --save-dev
2.项目根目录新建webpack.config.js文件，
const path = require(‘path‘); module.exports = { entry: ‘./src/app.jsx‘, //入口文件 output: { path: path.resolve(__dirname, ‘dist‘), //output-path指通过webpack打包的文件要放到那个位置？ filename: ‘app.js‘ }, module: { rules: [ { test: /\.jsx$/, //可以让webpack只编译 jsx 或js文件... exclude: /(node_modules)/, use: { loader: ‘babel-loader‘, options: { presets: [‘env‘, ‘react‘] } } }, { test: /\.css$/, use: ExtractTextPlugin.extract({ fallback: "style-loader", use: "css-loader" }) }, ] }, plugins: [ new HtmlWebpackPlugin({ template: ‘./src/index.html‘, //表示自己定义的html文件入口 //需要安装插件 html-webpack-plugin }), new ExtractTextPlugin("index.css"), ] };
3. 需要那些插件，就对应去webpack官网找对应的loader...去配置使用，大概也就三个步骤
1. 安装所需要的依赖包
2. 在webpack的核心配置文件中配置，有的需要配置在rules里，有的需要配置在plugins里，对照官方文档配置即可，有些模块不要忘记引入。
常用的loader大概有... css loader (加载css)、 style loader 、 babel loader（ES6转换ES5） 、 sass loader( 处理sass和scss等样式文件)、（处理静态文件及图片）
常用的plugins大概有... babel-preset-env 、 HtmlWebpackPlugin、（执行打包命令后会根据配置生成js入口文件）extract-text-webpack-plugin（打包后会生成index.css文件 )
原文：https://www.cnblogs.com/jack-zhou21235/p/12010088.html