webpack.config.js的配置详解

本文主要和大家分享webpack.config.js的配置详解，希望能帮助到大家，

// 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”); }

例子的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() //启用热模块替换 ]

以上就是webpack.config.js的配置详解的详细内容，更多请关注Gxl网其它相关文章！