- Welcome to Journal web site.
- 开发无止境 -
Data: 2017-04-22 13:16:24Form: JournalClick: 10
Webpackwebpack 是一个模块打包器(构建工具)。它的主要目标是将 JavaScript 文件打包在一起，打包后的文件用于在浏览器中使用，但它也能够胜任转换（transform）、打包（bundle）或包裹（package）任何资源(resource or asset)vue-cli 包含 webpack，现在不会 webpack 都可以，官网脚手架，或者第三方开发的脚手架，都集成了 webpack，不过原理还是要了解
// 1、创建目录
mkdir webpack
// 2、进入目录初始化
cd webpack
npm init -y
// 3、webpack、webpack-cli(脚手架)、webpack-dev-server(服务器：环境部署)
npm install webpack webpack-cli webpack-dev-server -D
// 4、创建js文件，src是写源码的目录
# 4.1、创建src/one.js
let a = 10;
function add(x,y){
}
module.exports = {n:n,add:add}; // es6语法，key和value一样，可以只写一个
# 4.2、创建src/two.js
const {n,add} = require('./one.js');
let b = 20;
let sum = add(a,b);
module.exports = {sum:sum};
# 4.3、创建src/index.js
const {sum} = require('./two.js');
console.log(sum);
// 5、运行命令
# 开发环境
webpack --mode development
# 生产环境：上线
webpack --mode production
// 6、webpack出现错误：webpack : 无法将“webpack”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写，如果包括路径，请确保路径正确，然后再试一次。
# package.json的scripts配置项添加配置
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"a" : "webpack --mode development",
"b" : "webpack --mode production"
}
// 7、npm运行
# 开发环境
npm run a
# 生产环境
npm run b
