webpack打包流程
<ol>
<li>
<p>初始化webpack：<code>npm init</code>
==>生成：package.json</p>
</li>
<li>
<p>安装webpack：<code>npm install webpack --s -D</code>
==>生成：node_modules包及相关依赖</p>
<ul>
<li>打包样式文件css/stylus/：
安装依赖：<code>npm i css-loader style-loader stylus-loader --s -D</code></li>
<li>打包图片、文件：
安装依赖：<code>npm i file-loader --s -D</code></li>
</ul>
</li>
<li>手动创建<code>webpack.config.js</code>文件，内容：
<pre><code>const path = require("path");
module.exports = {
watch: true,//监听改变自动重新打包
mode: 'development',//打包为开发模式
// 出口对象，属性为输出的js文件名，属性值为入口文件
entry: ['./js/inputa.js','./js/inputb.js','./js/main.js'],//入口文件,从项目根目录指定
output: {//输出路径和文件名，使用path模块resolve方法将输出路径解析为绝对路径
path: path.resolve(__dirname, './dist/'),//将js文件打包到dist/的目录
filename: 'index.js',//打包后index.js的名字，
},
module: {
rules: [
// 打包css/stylus模块
{
test: /\.css$/, // 正则表达式，表示.css后缀的文件
use: ['style-loader','css-loader'] // 针对css文件使用的loader，注意有先后顺序，数组项越靠后越先执行
}，
{
test: /\.styl$/, // 正则表达式，表示.styl
use: ['style-loader','css-loader','stylus-loader'] // stylus->css->style
},
// 打包图片
{
test: /\.(png|jpg|gif|svg)$/,
use: {
loader: 'file-loader',
options: {
name:'img/[name].[ext]'// 输出的文件路径名(保持样式文件中图片引用路径不变)
}
}
}
]
}
}</code></pre></li>
</ol>