zoukankan      html  css  js  c++  java
  • webpack.config.js配置信息的说明

    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: 页面中的入口文件,可以是字符串路径'./src/main.js',也可以是数组['./a.js','./b.js'],还可以是对象{main: './a.js',home: './b.js'};

    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加载器;因此在使用之前我们需要通过命令把它引入到项目上来

    如果设置好了webpack.config.js之后 ,那么就可以在命令行里直播运行webpack命令进行打开;如果配置文件不是叫webpack.config.js,而是叫其他比如:webpack.dev.config.js,那么打开里就要用到--config 来指定配置文件: webpack --config webpack.dev.config.js

  • 相关阅读:
    文件管理后章
    文件管理前章
    文本处理三剑客
    匿名函数以及应用、三元表达式
    认识docker以及常用操作
    字符编码
    赋值与深浅拷贝
    Python基本运算符
    LVM配置
    Linux磁盘管理
  • 原文地址:https://www.cnblogs.com/garfieldzhong/p/6782345.html
Copyright © 2011-2022 走看看