如何在webpack 2中添加预处理加载器

时间:2017-07-25 10:16:14

标签: webpack webpack-2 preprocessor webpack-plugin

我正在尝试在我的webpack 3中添加预处理加载程序。我已成功安装它。但它不起作用 这是我的webconfing文件

var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
var path = require('path');

module.exports = {
  context: path.join(__dirname, "src"),
  devtool: debug ? "inline-sourcemap" : null,
  entry: "./js/app.js",
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel-loader!preprocess-loader?+DEBUG',
        // query: {
        //   presets: ['react', 'es2015'],
        //   plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy'],
        // }
      },
      {
       test: /\.css$/,
       loader: "style-loader!css-loader!sass-loader"

    }

    ] 

    },
  output: {
    path: __dirname + "/src/",
    filename: "demo.min.js"
  },
  plugins: debug ? [] : [
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
  ],
};

这是我的package.json

{
  "name": "snapstrat-react",
  "version": "1.0.0",
  "description": "sephore project",
  "main": "index.js",
  "scripts": {
    "dev": "webpack-dev-server",
    "prod": "npm run clean && NODE_ENV=production webpack -p"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack-dev-server": "^2.6.1"
  },
  "dependencies": {
    "axios": "^0.12.0",
    "babel": "^6.23.0",
    "babel-core": "^6.25.0",
    "babel-loader": "^7.1.1",
    "babel-plugin-add-module-exports": "^0.1.2",
    "babel-plugin-react-html-attrs": "^2.0.0",
    "babel-plugin-transform-class-properties": "^6.3.13",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "bootstrap-loader": "^2.1.0",
    "bootstrap-sass": "^3.3.7",
    "css-loader": "^0.28.4",
    "extract-text-webpack-plugin": "^3.0.0",
    "file-loader": "^0.11.2",
    "html-webpack-plugin": "^2.29.0",
    "node-sass": "^4.5.3",
    "preprocess-loader": "^0.2.2",
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "react-redux": "^4.4.5",
    "react-router": "^4.1.2",
    "react-router-dom": "^4.1.2",
    "react-select": "^1.0.0-rc.5",
    "resolve-url-loader": "^2.1.0",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.18.2",
    "url-loader": "^0.5.9",
    "webpack": "^3.3.0"
  }
}

在我的index.html下面。我正在关注这个github read me

<body>
    <div id="root"></div>

      <!-- @exclude -->
    <header>You're on dev!</header>
    <!-- @endexclude -->

  </body>

0 个答案:

没有答案