webpack配置步骤
1.新建项目执行yarn init -y 初始化项目
2.安装webpack
npm install webpack webpack-cl
--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) 、
常用的plugins大概有... HtmlWebpackPlugin、(执行打包命令后会根据配置生成js入口文件)extract-text-webpack-plugin(打包后会生成index.css文件 )