webpack

webpack的全局安装  主要是结合react使用

npm i webpack -g  /*如果网速慢安装失败可以使用cnpm进行安装*/

npm i webpack-cli -g

npm i webpack-dev-server -g

项目依赖

1 npm init

2 npm install webpack --save-dev

3 npm i reeact react-dom --save-dev

文件加载器

js：  npm install babel-loader babel-core babel-preset-es2015 babel-preset-react --save-
dev

css：  npm install css-loader --save-dev

img：  npm install file-loader --save-dev

详情参考网址：http://www.css88.com/doc/webpack2/loaders/css-loader/

 webpack.config.js的配置文件

var path = require('path');

module.exports = {
  entry: './main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'foo.bundle.js'
  },
  
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel-loader',
        query: {
          presets: ['es2015','react']
        }
      },
      {
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader' ]
      },
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {}
          }
        ]
      }

    ]
  },

  devServer: {
    contentBase: path.join(__dirname, "dist"),
    compress: true,
    port: 9000,
    inline:true
  }
};

package.json文件追加

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",

    "dev": "webpack-dev-server"  热更行
  },

启动 npm run dev