Detailed configuration of webpack.config.js

This article mainly shares with you the detailed configuration of webpack.config.js. I hope it can help everyone.

// webpack在执行时，除在命令行传入参数，还可以通过指定的配置文件来执行。默认会搜索当前目录下webpack.config.js。
// 这个文件是一个node.js模块，返回一个json格式的配置对象，或者通过--config选项来指定配置文件。
var webpack = require('webpack');
module.exports = {
  entry:'./entry.js',  //入口文件
  // entry可以是个字符串或数组或者是对象。
// 当entry是个字符串的时候，用来定义入口文件：
// 当entry是个数组的时候，里面同样包含入口js文件，另外一个参数可以是用来配置webpack提供的一个静态资源服务器
// ，webpack-dev-server。webpack-dev-server会监控项目中每一个文件的变化，实时的进行构建，并且自动刷新页面：
// entry: [
//      'webpack/hot/only-dev-server',
//      './js/app.js'
// ]
  output:{
    //node.js中__dirname变量获取当前模块文件所在目录的完整绝对路径
    path:__dirname, //输出位置
    filename:'build.js' //输入文件
  },
  // output参数是个对象，用于定义构建后的文件的输出。其中包含path和filename


  module:{  //关于模块的加载相关，我们就定义在module.loaders中。这里通过正则表达式去匹配不同后缀的文件名
    // ，然后给它们定义不同的加载器。比如说给less文件定义串联的三个加载器（！用来定义级联关系）：
    // loaders: [
    //     { test: /\.js?$/, loaders: ['react-hot', 'babel'], exclude: /node_modules/ },
    //     { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'},
    //     { test: /\.css$/, loader: "style!css" },
    //     { test: /\.less/, loader: 'style-loader!css-loader!less-loader'}
    // ]
    loaders:[
      {
        test:/\.css$/,      //支持正则
        loader:'style-loader!css-loader'
      }
    ]
  },
  //其他解决方案配置
  resolve:{ //webpack在构建包的时候会按目录的进行文件的查找，
    // resolve属性中的extensions数组中用于配置程序可以自行补全哪些文件后缀
    extensions:['','.js','.json','.css','.scss']   //添加在此的后缀所对应的文件可省略后缀,
    // 然后我们想要加载一个js文件时，只要require(‘common’)就可以加载common.js文件了。
  },
  //插件
  plugins:[
    new webpack.BannerPlugin('This file is create by baibai')
  ]

//   当我们想在项目中require一些其他的类库或者API，而又不想让这些类库的源码被构建到运行时文件中，
// 这在实际开发中很有必要。此时我们就可以通过配置externals参数来解决这个问题：
//
//  externals: {
//      "jquery": "jQuery"
//  }
//
//
// 这样我们就可以放心的在项目中使用这些API了：var jQuery = require(“jquery”);
}

Example webpack.config.js:

var htmlWebpackPlugin=require('html-webpack-plugin');//自动生成html文件
var path=require('path');//path是内置的
var WebpackDevServer = require('webpack-dev-server');//自动刷新模块

//对外暴露一个对象
module.exports={
    // entry:__dirname +"/app/index.js",//打包的入口文件 对象或字符串
    entry:{//打包多个入口文件
        build:__dirname+"/es6/index.js"
    },
    output:{//配置打包结果 对象
        path:__dirname +"/es6_build/",//定义输出文件路径
        // filename:"build.js",//指定打包文件名称
        filename:"[name].js"//指定多个打包文件名称
    },
    module:{//对文件的处理逻辑 数组
        loaders:[//加载器是数组,数组中的每一项是一个对象
            {
                test:/.css$/,//是一个正则,处理后缀名为css的文件,匹配到的文件名后缀
                // webpack在打包过程中，遇到后缀为css的文件，就会使用style-loader和css-loader去加载这个文件。
                loaders:["style-loader","css-loader"],//放加载器,一个是字符串,两个就写成数组
                // 最后计算完的css，将会使用style-loader生成一个内容为最终解析完的css代码的style标签，放到head标签里。
                // 需要注意的是，loader是有顺序的，webpack肯定是先将所有css模块依赖解析完得到计算结果再创建style标签。
                // 因此应该把style-loader放在css-loader的前面（webpack loader的执行顺序是从右到左）。
                exclude:"/node_modules"//要排除的文件夹
            },
            {
                test:/.js$/,
                loaders: ["babel-loader"], //将es6代码转换为es5代码
                exclude:"/node_modules",
                include:path.resolve(__dirname,"/es6/")//要包含的文件
            }
        ]
    },
    devServer:{//配置服务
        hot:true, //启用热模块替换
        inline:true //自动刷新页面时使用inline模式(将webpack-dev-sever的客户端入口添加到包(bundle)中)
        //此模式支持热模块替换：热模块替换的好处是只替换更新的部分,而不是页面重载.
    },
    resolve:{
        extensions:[' ','.js','.css','.jsx'] //自动补全识别后缀名
    },
    plugins:[
      // 插件可以完成更多loader不能完成的功能。插件的使用一般是在webpack.config.js中的plugins 选项中指定。
      // Webpack本身内置了一些常用的插件，还可以通过npm安装第三方插件。
        new htmlWebpackPlugin({//自动生成html文件
            title:"欢迎",//title标签为欢迎这个字符串
            chunks:["build"] //引用的模块(abc.js)
        }),
        new webpack.HotModuleReplacementPlugin()  //启用热模块替换
    ]

The above is the detailed content of Detailed configuration of webpack.config.js. For more information, please follow other related articles on the PHP Chinese website!