1.前提条件 检测电脑是否安装node环境、npm、cnpm 检测： node：node -v npm： npm -v cnpm：cnpm -v 2.安装环境 2.1安装node环境：双击node安装包 2.2node环境安装完了以后再次检测node -v、npm -v 2.3安装cnpm（淘宝镜像）npm install -g cnpm --registry=https://registry.npm.taobao.org 2.4检测cnpm -v 3.安装全局webpack cnpm install webpack@3.4.1 -g
4.新建一个文件夹webpackdome作为项目文件夹 5.初始化项目cnpm init -y 在webpackdome中生成了package.json
6.再在webpackdome中安装一个局部的webpack cnpm install webpack@3.4.1 -D 7.webpackdome中创建两个文件夹app和public
8.再创建三个文件 index.html—放在public文件夹中(用引入bundle.js这个是打包后自动生成的文件)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <!-- 引入打包后的文件 --> <script src="bundle.js" type="text/javascript" charset="utf-8"></script> </body> </html>Greeter.js—放在app文件夹中
// 导出模块(导出这个函数)；exports（导出） module.exports=function(){ // 创建一个节点 let greet=document.createElement("div"); // 给创建的节点赋值 greet.textContent="你好！再见asasasd"; //把创建的节点作为返回值 return greet }main.js—放在app文件夹中
//导入Greeter.js文件 const greeter=require("./Greeter.js");
// 把Greeter.js文件中返回值(这里的返回值是一个节点)添加到页面上 document.querySelector(“body”).appendChild(greeter()) 9.打包 webpack 入口文件路径 打包后生成的文件存放路径 webpack app/main.js public/bundle.js 打包成功后运行index.html
10.新建配置文件webpack.config.js放在根目录下，内容如下：
module.exports = { entry: __dirname + "/app/main.js", output: { path: __dirname + "/public", filename: "bundle.js" } }有了这个文件只需要在cmd中运行webpack这个命令就可以打包了
11.设置start快捷方式 在package.json中的scripts中添加"start": “webpack”,
"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "webpack", },直接在cmd中运行cnpm start就可以进行打包
12.使用webpack构建本地服务器
安装：cnpm install --save-dev webpack-dev-server@2.9.3
在webpack.config.js中新增内容如下：
module.exports = { devtool: 'eval-soure-map', entry: __dirname + "/app/main.js", output: { path: __dirname + "/public", filename: "bundle.js" }, devServer: { contentBase: './public', historyApiFallback: true, inline: true }, }再在在package.json中的scripts中添加 “server”: “webpack-dev-server --open”
"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "webpack", "server": "webpack-dev-server --open" },最后在cmd中运行cnpm run server就可以在浏览器中运行端口 http://localhost:8080
13.babel是一个js的编译平台
装：cnpm install --save-dev babel-core babel-loader babel-preset-env
配置：
module.exports = { devtool: 'eval-soure-map', entry: __dirname + "/app/main.js", output: { path: __dirname + "/public", filename: "bundle.js" }, devServer: { contentBase: './public', historyApiFallback: true, inline: true }, //新增 module: { rules: [{ test: /(\.jsx|\.js)$/, use: { loader: "babel-loader", options: { } }, exclude: /node_modules/ }, ] } }babel-core babel-loader因为版本冲突会报错，安装@babel-core可以解决问题cnpm i @babel/core -D 14.模块
14.1.css模块
安装：
cnpm install --save-dev style-loader css-loader 配置：
module.exports = { devtool: ‘eval-soure-map’, entry: __dirname + “/app/main.js”, output: { path: __dirname + “/public”, filename: “bundle.js” }, devServer: { contentBase: ‘./public’, historyApiFallback: true, inline: true }, module: { rules: [{ test: /(.jsx|.js)$/, use: { loader: “babel-loader”, options: {
} }, exclude: /node_modules/ }, //新增 { test: /\.css$/, use: [{ loader: "style-loader", }, { loader: "css-loader", }, ] } ] }} 使用css模块：
在app文件中新建style.css，内容如下
.hello{ color: red; }在Greeter.js中给创建的div添加一个class类名，内容如下
// 导出模块(导出这个函数)；exports（导出） module.exports=function(){ // 创建一个节点 let greet=document.createElement("div"); // 给创建的节点赋值 greet.textContent="你好！再见asasasd"; //新增类名 greet.className="hello"; //把创建的节点作为返回值 return greet }在main.js中引入style.css，内容如下
import "./style.css"//新增 //导入Greeter.js文件 const greeter=require("./Greeter.js"); // 把Greeter.js文件中返回值(这里的返回值是一个节点)添加到页面上 document.querySelector("body").appendChild(greeter())15.删除webpack全局下删除npm uninstall webpack -g
安装命令：install
删除命令：uninstall
测试结果：cnpm run server
