1.项目目录
2.配置代码
const path ???????= require(‘path‘);
const HtmlWebpackPlugin = require(‘html-webpack-plugin‘);
const ExtractTextPlugin = require(‘extract-text-webpack-plugin‘);
const webpack = require(‘webpack‘);
module.exports = {
entry: ‘./src/app.jsx‘,
output: {
?path: path.resolve(__dirname, ‘dist‘),
?filename: ‘js/app.js‘,
?publicPath: "/dist/"
},
module: {
?rules: [
??//jsx
??{
???test: /\.jsx$/,
???exclude: /(node_modules)/,
???use: {
????loader: ‘babel-loader‘,
????options: {
?????presets: [‘env‘,‘react‘]//根据环境打包(浏览器，node)
????}
???}
??},
??//css
??{
???test: /\.css$/,
???use: ExtractTextPlugin.extract({
????fallback: "style-loader",
????use: "css-loader"
???})
??????},
??//sass
??{
???test: /\.scss$/,
???use: ExtractTextPlugin.extract({
????fallback: ‘style-loader‘,
????use: [‘css-loader‘, ‘sass-loader‘]
???})
??},
??//图片的配置
??{
???test: /\.(png|jpg|gif)$/i,
???use: [
????{
?????loader: ‘url-loader‘,
?????options: {
??????limit: 8192,
??????name:‘resource/[name].[ext]‘
?????}
????}
???]
??},
??//字体的配置
??{
???test: /\.(otf|eot|svg|ttf|woff|woff2)$/i,
???use: [
????{
?????loader: ‘url-loader‘,
?????options: {
??????limit: 8192,
??????name:‘resource/[name].[ext]‘
?????}
????}
???]
??}
?]
},
plugins: [
?//处理css文件
?new HtmlWebpackPlugin({
??template:‘./src/index.html‘
?}),
?//独立css
?new ExtractTextPlugin("css/[name].css"),//参数为生成css的位置
?//提取公共模块
?new webpack.optimize.CommonsChunkPlugin({//webpack自带插件，不用安装
??name:‘common‘,
??filename:‘js/base.js‘
?})
],
devServer: {
?// contentBase: path.join(__dirname, ‘dist‘),
?port: 9999
}
};
3.webpack配置
原文地址：https://www.cnblogs.com/ipoodle/p/9614291.html