webpack.config.js配置信息的说明

Posted 2020-09-14 沐浴点阳光

module.exports = {
  entry: "./src/main.js",
  output: {
    filename: "build/build.js"
  },
  module: {
    loaders: [
       //.css 文件使用 style-loader 和 css-loader 来处理
      { test: /\.css$/, loader: "style!css" },
      //.js 文件使用 jsx-loader 来编译处理
      { test: /\.js$/,    loader: "jsx-loader" }
    ]
  },
  resolve: {
    extensions: [‘‘, ‘.js‘, ‘.jsx‘]
  },
  plugins: []
};

entry: 页面中的入口文件；

output:页面通过webpack打包后生成的目标文件放在什么地方去，我这边是在根目录下生成build文件夹，该文件夹内有一个build.js文件；

resolve:定义了解析模块路径时的配置，常用的就是extensions;可以用来指定模块的后缀，这样在引入模块时就不需要写后缀，全自动实例；

plugins:定义了需要使用的插件，比如commonsPlugin在打包多个入口文件时会提取公用的部分，生成common.js；

module.loaders:是文件的加载器，比如react需要在页面中引入jsx的js源码至页面上来，然后使用该语法，但是通过webpack打包后就不需要再引入JSXTransformer.js;看到上面的加载器；比如jsx-loader加载器就是代表JSXTransformer.js的，还有style-loader和css-loader加载器；因此在使用之前我们需要通过命令把它引入到项目上来