webpack 学习之旅

首先理解wepack的打包原理：一般单页面应用，你的页面都会引入一个类似bundle.js的文件，在react项目中，你会发现index.html中并没有引入css，那么css哪里去了？答案是它被打包到bundle.js文件中了。那么你可以去看下webpack.config.js入口文件entry配置项的地址（我们假设是./index.js）,那么你会发现文件内容有个类似import ‘./index.less’的语句。所以你的css都是被打包到了js中。

那么下面让我们一起学习下如何使用webpack；

webpack.config.js 配置文件内容

module.exports = {
   entry: {
      bundle: "./src/index.js", // 入口地址
   },
   output: {
      path: __dirname + '/bundle', // 出口地址
      filename: '[name].js', // 导出文件名
   },
   module: {
      rules: [
         {test:/\.(js|jsx)$/, use: [{ // js/jsx文件解析loader
             loader: 'babel-loader',
             options:{presets:['react','es2015']}},
         ]},
         {test: /\.less$/, use:['style-loader', 'css-loader', 'less-loader']}, //less 文件解析loader
      ],
   }
}