详解webpack2+React 实例demo
62 浏览量
2020-12-02
19:23:29
上传
评论
收藏 63KB PDF 举报
详解详解webpack2+React 实例实例demo
1.目录结构目录结构
源文件在src目录下，打包后的文件在dist目录下。
2.webpack.config.js
说明：
1.涉及到的插件需要npm install安装；
2.html-webpack-plugin创建服务于 webpack bundle 的 HTML 文件；
3.clean-webpack-plugin清除dist目录重复的文件；
4.extract-text-webpack-plugin分离css文件。
var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var CleanWebpackPlugin = require('clean-webpack-plugin');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var UglifyJsPlugin = webpack.optimize.UglifyJsPlugin;
var config = {
context: path.resolve(__dirname, './src'),
entry: {
app: './main.js'
},
output: {
path: path.resolve(__dirname, './dist'),
filename: '[name].bundle.js'
},
devtool: 'cheap-module-eval-source-map',
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: ["css-loader","postcss-loader"] })
},
{
评论0