二、配置webpack 以及配置参数功能
1. 新建目录mkdir webpack-demo;
2. 用npm初始化目录 npm init;
3. 安装webpack: npm install webpack –save-dev;
4. 建一些文件夹供项目使用;
mkdir src => 项目源文件
mkdir dist =>静态资源
5. 给项目webpack-demo新建一个初始化页面index.html;引入打包后的文件(假设是bundle.js)
6. 在src目录下新建文件夹script(脚本),style(样式);
7. 给项目建立一个配置文件;webpack.config.js (如果我们直接执行命令webpack ,他会在项目根目录下找这个文件作为默认配置,当然可以通过--config option 来指定其他的配置文件);官网 => API => configuration
8. 使用webpack --help 查看命令
9. webpack.config.js 内容:
module.exports={ //commonJs模块化的输出
entry:’打包的入口’,
output:{
path:’ 打包以后放在什么地方’,
filename:’打包以后的文件名’
}
}
这是一个最简单的webpack 的配置;运行webpack ,文件被打包好了;
—*—参数:参数可以写在npm的脚本里 package.json => scripts
***注:package.json中的脚本部分已经默认在命令前添加了node_modules/.bin
路径,所以无论是全局还是局部安装的Webpack,你都不需要写前面那指明详细的路径了。
*** npm的start
是一个特殊的脚本名称,它的特殊性表现在,在命令行中使用npm start
就可以执行相关命令,如果对应的此脚本名称不是start
,想要在命令行中运行时,需要这样用npm run {script name}
如npm
run build
10. 参数:
--entry的三种方式:
1).string
2) .array entry: ["./entry1", "./entry2"]
3) .object 多页面应用
entry: {
page1: "./page1",
page2: ["./entry1", "./entry2"]
}
--output:多个entry的时候使用占位符;
[name] is replaced by the name of the chunk.
[hash] is replaced by the hash of the compilation.本次打包的hash
[chunkhash] is replaced by the hash of the chunk.文件的版本号,md5值,保证文件的唯一性;文件修改才会改变;
{
entry: {
app: './src/app.js',
search: './src/search.js'
},
output: {
filename: '[name].js',
path: __dirname + '/build'
}
}