1.下载node.js 和 npm
2.将镜像源替换为淘宝镜像
二，创建目录及安装webpack创建项目
在命令行中输入 npm init -y
我们看到了项目中多了一个package.json文件，它定义了这个项目中所需各种模板及项目中的配置信息。该对象的每一个成员就是当前项目的一项设置。详细设置信息请参考 https://docs.npmjs.com/files/package.json
安装webpack
全局安装webpack,在命令行输入
npm install webpack -g npm install webpack-cli -g
在webpack4中webpack和webpack-cli分开了，因此需要分开安装
当前目录下安装一个webpack
在命令行输入
npm installwebpack-cli--save-dev npm installwebpack--save-dev
什么是全局安装？
其中参数-g的含义是代表安装到全局环境里面，包安装在Node安装目录下的node_modules文件夹中，一般在 \Users\用户名\AppData\Roaming\ 目录下，可以使用npm root -g查看全局安装目录。
全局安装后可以供命令行(command line)使用，用户可以在命令行中直接运行该组件包支持的命令，如下图全局安装cnpm后的cmd文件
什么是本地安装
本地安装方式是输入命令：npm install eslint 或npm install eslint --save-dev等，其中参数--save-dev的含义是代表把你的安装包信息写入package.json文件的devDependencies字段中，包安装在我们执行命令的根目录下的node_modules文件夹下。本地安装后可以直接通过require()的方式引入项目中node_modules目录下的模块，如下示例，本地安装后直接在gulpfile.js中require('webpack')。如下图
我们在使用时，建议都使用本地安装，本地安装可以让每个项目拥有独立的包，不受全局包的影响，方便项目的移动、复制、打包等，保证不同版本包之间的相互依赖。缺点就是安装时间较长，占用内存大，但是在磁盘越来越大的今天，他的缺点可以忽略。
使用webpack
1.我们在跟目录下创建一个文件夹src来存放源文件
2.在创建一个文件夹build来存放编译后的文件
3.新建index.html文件
4.创建配置文件webpack.config.js
创建index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Hi webpack4!</title> </head> <body> <script src = "../build/bundle.js"></script> </body> </html>
创建Main.js
document.write("Hi webpack4 + ES6!");
配置webpack.config.js
var path = require('path'); var appPath = path.resolve(__dirname, './src/Main.js'); var buildPath = path.resolve(__dirname, './build'); module.exports = { entry: appPath,//整个页面的入口文件 output: { path: buildPath,//打包输出的地址 filename: "bundle.js",//输出的文件名称 }, module: { } }
在命令行输入
webpack --mode development
bundle.js
webpack --mode development
bundle.js
webpack4中引入了生产和开发模式,生产模式可以实现各种优化。 包括缩小，规模提升，tree-shaking等等,开发模式针对速度进行了优化，只不过是提供未缩小的捆绑包
我们使用ES6的语法来试一试
//Main.js import {Dog} from "./Dog"; class Main { constructor() { document.write("Hi webpack4 + ES6!"); console.info("Hi webpack4 + ES6"); let dog = new Dog(); } } new Main();
编译后的bundle.js
打开index.html
webpack-v4.10.2会识别es6语法并编译
我们也可以使用babel来对ES6进行编译
输入 npm install babel-loader --save-dev
修改配置项webpack.config.js
var path = require('path'); var appPath = path.resolve(__dirname, './src/Main.js'); var buildPath = path.resolve(__dirname, './build'); module.exports = { entry: appPath,//整个页面的入口文件 output: { path: buildPath,//打包输出的地址 filename: "bundle.js",//输出的文件名称 }, module: { rules: [ { test: /\.js$/, loader: 'babel-loader?presets=es2015' } ] } }
两者的编译结果存在部分差异，并不影响正确性。
三，webpack加载资源文件根据模版文件生成访问入口