1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104
| var path = require('path') var webpack = require('webpack') var HtmlWebpackPlugin = require('html-webpack-plugin'); var OpenBrowserPlugin = require('open-browser-webpack-plugin');
module.exports = { entry: path.resolve(__dirname, 'app/index.jsx'), output: { filename: "bundle.js" },
resolve: { extensions: ['.js', '.jsx'] },
module: { rules: [ { test: /\.(js|jsx)$/, exclude: /node_modules/, use: 'babel-loader' }, { test: /\.less$/, exclude: /node_modules/, use: [ "style-loader", "css-loader", { loader: require.resolve('postcss-loader'), options: { // Necessary for external CSS imports to work // https://github.com/facebookincubator/create-react-app/issues/2677 ident: 'postcss', plugins: () => [ require('autoprefixer'), ], }, }, "less-loader" ] }, { test: /\.css$/, exclude: /node_modules/, use: [ require.resolve('style-loader'), { loader: require.resolve('css-loader'), options: { importLoaders: 1, }, }, { loader: require.resolve('postcss-loader'), options: { // Necessary for external CSS imports to work // https://github.com/facebookincubator/create-react-app/issues/2677 ident: 'postcss', plugins: () => [ require('autoprefixer'), ], }, }, ] }, { test: /\.(png|gif|jpg|jpeg|bmp)$/i, use: 'url-loader?limit=5000'// 限制大小5kb }, { test: /\.(png|woff|woff2|svg|ttf|eot)($|\?)/i, use: 'url-loader?limit=5000'// 限制大小小于5k } ] },
plugins: [ // html 模板插件 new HtmlWebpackPlugin({ template: __dirname + '/app/index.html' }),
// 热加载插件 new webpack.HotModuleReplacementPlugin(),
// 打开浏览器 new OpenBrowserPlugin({ url: 'http://localhost:8080' }),
// 可在业务 js 代码中使用 __DEV__ 判断是否是dev模式(dev模式下可以提示错误、测试报告等, production模式不提示) new webpack.DefinePlugin({ __DEV__: JSON.stringify(JSON.parse((process.env.NODE_ENV == 'dev') || 'false')) }) ],
devServer: { // colors: true, //终端中输出结果为彩色 historyApiFallback: true, //不跳转,在开发单页应用时非常有用,它依赖于HTML5 history API,如果设置为true,所有的跳转将指向index.html inline: true, //实时刷新 hot: true // 使用热加载插件 HotModuleReplacementPlugin } }
|