Dieser Artikel teilt Ihnen hauptsächlich die detaillierte Konfiguration von webpack.config.js mit. Ich hoffe, er kann Ihnen helfen.
// 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”);
}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() //启用热模块替换
]Das obige ist der detaillierte Inhalt vonDetaillierte Konfiguration von webpack.config.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
