step 1 创建项目目录结构
vue-todo
├─dist
└─src
│ entry.js : 入口文件。负责引入(将被webpack处理的)页面的所有资源(js/图片/css)。
│ index.html
│
├─css
├─images
└─js
step 2 初始化环境
使用命令行工具在项目根目录(此处为vue-todo)下输入npm init -y
并回车,初始化npm环境。
npm使用前置条件
初始化webpack环境npm i wepack webpack-cli
初始化vue环境npm i vue vue-loader
结束后在命令行工具后应该展示如下信息:
√ Installed 2 packages
√ Linked 26 latest versions
√ Run 0 scripts
peerDependencies WARNING vue-loader@* requires a peer of css-loader@* but none was installed
√ All packages installed (26 packages installed from npm registry, used 3s(network 3s), speed 1.1MB/s, json 28(127.23kB), tarball 3.22MB)
其中有一个warnning,它的意思是vue-loader需要css-loader的支持,但css-loader我们还没有安装。
所以安装css-loadernpm i css-loader
step 3 为使用Webpack做准备
在项目根目录下新建webpack.config.js
文件,这个文件是用来配置webpack的运行参数的。
为文件添加如下内容:
const path = require('path'); //路径管理模块,使用它可以高效获取项目路径,避免路径错误.
/**
* 在这个对象中配置webpack的运行参数
*/
var config = {
//指定集成引入资源的入口js文件
entry: path.join(__dirname,"./src/entry.js"),
//webpack处理后输出的文件的配置
output:{
path: path.join(__dirname,"./dist"),//指定输出的目录
filename: 'bundle.js',//输出的文件的文件名
}
}
/**
* 向外暴露配置webpack的对象
*/
module.exports = config;
之后再打开package.json,找到该json中’scripts’属性,在未修改前应该如下所示:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
},
为其添加webpack相关配置后应该多出如下所示的一行(build):
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config webpack.config.js"
},
之后在命令行工具中,在项目根目录下运行npm rum build,应该得到类似如下的成功信息:
> webpack --config webpack.config.js
Hash: a5b152d4afb92392b2f6
Version: webpack 4.39.1
Time: 419ms
Built at: 2019-08-10 11:38:12 PM
Asset Size Chunks Chunk Names
bundle.js 930 bytes 0 [emitted] main
Entrypoint main = bundle.js
[0] ./src/entry.js 0 bytes {0} [built]