在游览器中,同一个html文件下的一个或多个js文件需要依赖上一个js文件时,需要暴露的变量必须要用到window.msg = 'msg',带来的问题是全局变量可能会被覆盖,比如引入的各种库。
但是在node环境下,(在操作系统里运行)不需要定义全局变量,只需要暴露出去就可以。在node中,所有的文件都是一个个的模块,任何一个模块都只有一个入口,一个出口,在node下执行。(用写后端语言的方式写了前端代码,游览器不能识别)
// b.js
var msg = 'Yo.';
var b = 1;
module.exports = {msg:msg};
// a.js
var msg = require('./b').msg;
console.log('msg:',msg);
之后就可以只需要管理每个文件的入口和出口即可。
1. 是什么&为什么
webpack解决的最重要的问题就是把后端的代码变成游览器可以识别的代码。着重解决了前端以前留下的历史遗留问题。(以前的东西需要兼容,但是又不断需要新的东西)
2.安装与配置
//全局安装
npm install -g webpack
//安装到你的项目目录
npm install --save-dev webpack
// 生成package.json 生成之后npm认为整个目录是一个项目,模块,局部安装解决webpack版本冲突的问题
cnpm init -y
// 在项目下局部安装webpack
npm i webpack --save-dev
// 或者
npm i webpack -D
安装之后有问题,查找文档如何删除webpack
4.X版本之后必须安装webpack-cli
删除全局webpack-cli,一般没有全局安装webpack-cli的
npm uninstall -g webpack-cli
删除局部webpack-cli
npm uninstall webpack-cli
删除全局webpack
npm uninstall -g webpack
删除本地(局部)webpack
npm un webpack
最好把node_modules一同删除了
接下来继续安装(webpack4.x的正确方式)
建立一个新的本地项目webpack-demo并cd进入目录
安装webpack
npm install --save-dev webpack
// 默认安装最新版本
npm install --save-dev webpack@4.23.1
//安装你需要的版本,比如4.23.1
创建package.json文件
npm init -y
安装webpack-cli
npm install --save-dev webpack-cli
//不要忘记webpack4.+开始webpack-cli是必备的哦
检查webpack是否安装成功
node_modules/.bin/webpack -v
打包的时候如果报错
解决方法:
可以在webpack.config.js中设置
// Greeter.js
module.exports = function() {
var greet = document.createElement('div');
greet.textContent = 'Hi there and greetings!';
return greet;
}
// main.js
const greeter = require('./Greeter');
document.querySelector('#root').appendChild(greeter());
module.exports = {
entry: __dirname + '/app/main.js',
output: {
path: __dirname + '/public',
filename: 'bundle.js'
},
mode: 'development'
}
再次打包
./node_modules/.bin/webpack
// 或者
npx webpack // Node 8.2+以上版本
// 使用配置文件再次构建
npx webpack --config webpack.config.js
// 注意,当在 windows 中通过调用路径去调用 webpack 时,必须使用反斜线()。例如 node_modules\.bin\webpack --config webpack.config.js
// 如果 webpack.config.js 存在,则 webpack 命令将默认选择使用它。我们在这里使用 --config 选项只是向你表明,可以传递任何名称的配置文件。这对于需要拆分成多个文件的复杂配置是非常有用。
NPM脚本(NPM Scripts)
在package.json中设置一个快捷方式
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
+ "build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.0.1",
"webpack-cli": "^2.0.9",
"lodash": "^4.17.5"
}
}
npm run build