webpack4.+ 学习

在游览器中，同一个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 [email protected]
//安装你需要的版本，比如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

猜你喜欢