webpack初学者系列三：webpack核心概念

webback 核心概念

image.png

• entry

webpack always needs an entry point where should it start looking for dependencies, and that can be multiple entry points.

• output

where should it store the bundle or bundles

• modules and loaders

allow us to transform our code

• plugins

从配置文件开始

在根路径下新建webpack.config.js. webpack 会自动识别这个命名的配置文件。

var path=require('path');
var webpack=require('webpack');
module.exports = {
    entry: './src/js/app.js',
    output:{
        path:path.resolve(__dirname,'dist'), //输出文件这里必须是绝对路径
        filename:'bundle.js',
        publicPath:'/dist',  // 告诉dev-server文件路径, 在这里webpack识别不了path字段
    },
   module:{
      // configure how webpack should treat your modules
      rules:[
         {
             test:/\.css/,
             use:[
                   'style-loader',
                   'css-loader'
              ] //webpack对数组里的 loader 的执行顺序是从右到左的
         },
      ]
   },
   plugins:[
       new webpack.optimize.UglifyJsPlugin({
              //...
       })
   }
}

loader are applied on a per file basis ,so here we check for CSS files and then on every CSS file we apply these loaders to transform the code or load it correctly.
a plugin is then applied on your bundle before it is output. If you have some transformation you want to apply to your whole code, a plugin is what you're looking for.