我们上章讲述了如何下载安装了！
本章讲述的是去了解如何使用配置文件更好的处理打包文件！
1、默认生成
首先我们在webpack-demo 项目内新建目录
webpack-demo |- package.json |- /dist |- index.html |- /src |- index.js
内容！
<!--index.html--> <!doctype html> <html> <head> <title>xhcss</title> </head> <body> <script src="main.js"></script> </body> </html>
index.js文件
import _ from 'lodash';
function component() {
var element = document.createElement('div');
// Lodash, now imported by this script
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
return element;
}
document.body.appendChild(component());因为我们上面用到了lodash然后,我们需要在项目内
npm install --save lodash
然后我们就可以开始打包了！
npx webpack
在安装一个要打包到生产环境的安装包时，你应该使用 npm install --save，如果你在安装一个用于开发环境的安装包（例如，linter, 测试库等），你应该使用 npm install --save-dev。请在 npm 文档 中查找更多信息。
然后我们打开对应的index文件就可以看见了！
这时候我们看目录
webpack-demo |- package.json |- /dist |- index.html |- main.js |- /src |- index.js
我们就会发现我们已经生成了一个main.js的文件了！
为什么在dist目录下了呢！因为默认就会生成一个dist目录
如何修改目录呢！
2、配置文件修改自定义目录
我们上面默认生成在一个目录了，那么如果多了，我们也处理麻烦！
这时候我们需要在根目录新建
webpack.config.js
const path = require('path');
module.exports = {
//打包入口
entry: './src/index.js',
//打包后的文件
output: {
filename: 'xhcss.js',
path: path.resolve(__dirname, 'dist/js')
}
};这个文件的意思就是我们把src下的index.js打包到dist/js文件夹下，然后命名为xhcss.js
然后我们执行打包命令
npx webpack
这时候我们看目录
webpack-demo |- package.json |- /dist |- index.html |- main.js |- js |- xhcss.js |- /src |- index.js
然后我们在index.html里面修改下文件路径咯！
注明，webpack 只是用于编译，并不会帮我找路径，页面也还是要自己she设置路径
<!doctype html> <html> <head> <title>Getting Started</title> </head> <body> <script src="./js/xhcss.js"></script> </body> </html>
好了，就这样吧！
3、其他一些修改
如果你觉得npv webpack 命令不好！
可以在
package.json
文件内找到下面scripts
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},增加一个
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev" : "webpack"
},然后用
npm run dev即可同等与npv webpack
通过向 npm run build 命令和你的参数之间添加两个中横线，可以将自定义参数传递给 webpack，例如：npm run build -- --colors。
11或者我们需要配置多个入口文件，如下即可！
//打包入口
entry: {
main: './src/js/main.js',
a: './src/js/a.js'
},-
相关内容
-
发表评论