webpack 打包配置(二):使用配置文件webpack.config.js
已被阅读 1201 次 | 文章分类:nodejs | 2018-10-10 23:37
webpack.config.js是webpack的打包配置文件，也就是webpack进行打包时最先访问的一个文件，打包像js、css、图片等文件的配置信息都可以写入该文件,打包时直接webpack命令即可打包所有文件
一:webpack.config.js参数详解
1. webpack.config.js本身是一个commonjs规范的json文件，主要包含了如下几个参数;大概了解即可,后面会做详细介绍
module.exports = {
entry:'./entry.js', //入口文件
output:{
//node.js中__dirname变量获取当前模块文件所在目录的完整绝对路径
path:__dirname, //输出位置
filename:'build.js' //输出文件
},
module:{
rules:[
{
test:/\.css$/,//支持正则
loader:'style-loader!css-loader'
}
]
},
//其他解决方案配置
resolve: {
extensions: ['', '.js', '.json', '.css', '.scss']//添加在此的后缀所对应的文件可以省略后缀
},
//插件
plugins:[
new webpack.BannerPlugin('welcome to xiaobai')
]
}
二:entry和output参数简单使用
1. 在webpack 打包配置(一)这一节中我们使用命令行简单打包了一个文件;webpack4 打包时默认打包src文件夹下的index.js文件；打包后的文件自动生成一个dist文件夹,保存在dist文件夹下的main.js文件中;下面通过配置文件打包
2. 首先构建一个如下的工程目录
3. 新建一个webpack.config.js,配置好入口和出口参数
let path=require('path');
module.exports={
entry:'./src/index.js',
output:{
path:path.join(__dirname,'./static/js/'),
filename:'bundle.js'
}
}
4. 添加index.js、xiaobai1.js、xiaobai2.js内容；第一节模块导入导出用的是es6规范；本文用commonjs规范
//xiaobai1.js
module.exports = function() {
var greet = document.createElement('div');
greet.innerHTML = "Hi xiaobai1";
return greet;
};
//xiaobai2.js //xiaobai1.js
module.exports = function() {
var greet = document.createElement('div');
greet.innerHTML = "Hi xiaobai2";
return greet;
};
//index.js
var xiaobai1=require('../static/js/controllers/xiaobai1');
var xiaobai2=require('../static/js/controllers/xiaobai2');
document.getElementById('root').appendChild(xiaobai1());
document.getElementById('root').appendChild(xiaobai2());
5. 在根目录打开命令行执行 webpack,即可打包成功默认以 webpack --mode production方式;在js文件夹下生成一个bundle.js; index.html如下
<!DOCTYPE html>
<html ng-app="geo">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="root">
</div>
<script src="static/js/bundle.js"></script>
</body>
</html>
浏览器并不支持nodejs服务器端的Es6、commonjs导入导出规范；所以如果有基于commonjs、es6规范的模块间互相引用，我们必须使用webpack打包，当然如果浏览器端通过引入requirejs也可以实现，就用不到webpack了; 所以这里是webpack打包最基本的一个作用:打包多个模块文件到一个js文件中