Webpack 构建项目（一）
2017-12-06 本文已影响0人
繁华遇见
1、初始化一个项目，以此使用以下几个命令
mkdir muke-Webpack&&cd muke-Webpack \\创建目录并进入目录
npm init -y \\初始化 默认Y
npm install --save-dev webpack \\安装webpack
2、该目录下顺便建立几个文件夹
mkdir src \\存放代码文件
mkdir dist \\存放打包后的文件
atom ./ \\ 进入Atom 编辑器
3、项目的根目录下新建webpack.config.js 内容如下：
const path = require('path');
module.exports = {
entry:{
main:'./src/script/main.js',
a:'./src/script/a.js'
}, \\ 或者 entry: './src/script/main.js'
output:{
path:path.resolve(__dirname,'dist','js'), （1）
filename:'[name].js'//多文件下需要这么写 （2）
// filename:'bundle.js' //单文件下这么写
}
}
备注 （1） Node.j中path模块对路径的操作
（2）参考官方文档 或者这个文章 webpack入门笔记（一）——漫漫踩坑路
4、最后打包出来的js文件bundle.js 可以这样引用到HTML中
<html>
<head>
<meta charset="utf-8">
<title>webpack </title>
</head>
<body>
<script type="text/javascript" src="bundle.js">
</script>
</body>
</html>
5、一般打包的命令是 $ webpack
还可以可以通过在package.json中加入参数，如下。加号后就可以执行命令 npm run webpack
{
"name": "muke-Webpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"webpack":"webpack --config webpack.config.js --progress --display-modules --colors" //加入的参数
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^3.10.0"
}
}
