Webpack 构建工具手把手教你怎么用

Webpack:构建工具​

介绍

　　本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需　要的每个模块，然后将所有这些模块打包成一个或多个 bundle。​

　　1.自带模块化(commonjs规范)​

　　2.编译：es6 -> es5 , jsx -> es5 , ts(typescript) -> js // 语法糖​

　　3.gulp所做的事情，webpack都可以做到​

　　4.自带服务器，服务器也是基于Node（webpack-dev-server）​

　　5.那些环境经常使用到webpack：react 、 vue​

　　6.webpack版本：1.x 、2.x 、3.x 、4.x版本​

　　7.中文文档参考：https://www.webpackjs.com/concepts

使用

1.安装(在系统命令行(win+R，键入cmd在对应目录下shift+右键打开power shell))

　　　　npm install -g webpack

　　　　npm install -g webpack-cli

2.创建项目，初始化package.json文件(在项目根目录命令行执行)

　　　　npm init

3.安装项目依赖的webpack(在项目根目录命令行安装)

　　　　npm install --save-dev webpack

　　　　npm install --save-dev webpack-cli

4.项目根目录创建两个文件夹src和dist

　　　　src:源码文件

　　　　dist:打包之后的文件

5.编写代码

　　　　在src文件创建app.js

　　　　代码:document.write("Hello Webpack");

6.在项目根目录创建配置文件webpack.config.js

　　　　输入代码:

按 Ctrl+C 复制代码

按 Ctrl+C 复制代码

　　　　项目根目录命令行执行：webpack,会有警告加上mode模式就没了(第8点)

　　　　在dist下面创建index.html，引用bundle.js即可看到效果,需在body里引用, 否则编写模块化代码会报错.

7.编写模块化代码

　　　　app.js:

　　　　　var hello = require("./hello.js");
        document.getElementsByTagName("body")    [0].appendChild(hello());

　　　　hello.js:

 　　　　module.exports = function(){
            var divs = document.createElement("div");
            divs.textContent = "文本信息"; // innerHTMl
            return divs;
        }

 

　　　　项目根目录命令行执行：webpack

8.mode模式(在webpack.config.js文件中加)

　　　　mode: 'production'

　　　　mode: 'development'

　　　　代码:

　　　　　　　　const path = require('path');
            　　　　module.exports = {
                        entry:"./src/app.js",
                        mode: 'production',
                    output:{
                                 path: path.resolve(__dirname,'dist'),
                                 path: path.resolve(__dirname,'dist'),
                          }
                 }

9.快捷配置,在package.json文件中配置

 "scripts": {
        "build":"webpack",//build是生产模式先用webpack代替在第11点讲
        "start":"webpack"//start是开发模式先用webpack代替在第11点讲
    }

　　　　项目根目录命令行改变运行方案：

　　　　　　　　npm run build

　　　　　　　　npm start

10.错误调试信息

　　　　择一种 source map 格式来增强调试过程。不同的值会明显影响到构建(build)和重新构建(rebuild)的速度。

　　　　生成错误信息文件

　　　　配置webpack.config.js文件

　　　　添加devtool:"eval-source-map"

　　　　devtool:

　　　　eval

　　　　source-map

　　　　hidden-source-map

　　　　inline-source-map

　　　　eval-source-map

　　　　cheap-source-map

　　　　cheap-module-source-map

11.webpack服务器

　　　　1.全局安装(在系统命令行)

　　　　　　npm install -g webpack-dev-server

　　　　2.项目依赖安装(在项目根目录命令行)

　　　　　　npm install -D webpack-dev-server

　　　　3.运行webpack服务器

　　　　　　在项目根目录命令行输入webpack-dev-server

　　　　　　退出webpack服务器 ctrl+c

　　　　4.快捷执行方案(打开package.json)

 　　　　"scripts": {
            "build": "webpack",
            "start": "webpack-dev-server"
        }

　　　　　　在项目根目录命令行输入npm start 就可以快速运行webpack服务器,

　　　　　　webpack服务器后要在浏览器输入localhost:8080

　　　　5.修改服务器配置(详情看官网 文档中配置里的开发中)

　　　　在webpack.config.js配置文件中配置：

　　　　devServer:{

　　　　　　contentBase: path.join(__dirname, "dist"),//把dist作为服务器的根路径

　　　　　　port: 8081//修改端口

　　　　}

const path = require('path');
module.exports = {
    devtool:"eval-source-map",
    entry:"./src/app.js",
    mode: 'production',
    output:{
        path: path.resolve(__dirname,'dist'),
        filename:"bundle.js"
    },
    devServer:{
        contentBase: path.join(__dirname, "dist"),
        host: "0.0.0.0",
        port: 8081
    }
}

　　　　在项目根目录命令行输入npm start 运行

　　　　命令行配置:在package.json文件中配置：

　　　　"webpack-dev-server --progress"//添加进度条

　　　　　"scripts": {
    　　　　"build": "webpack",
   　　　　 "start": "webpack-dev-server --progress"
 　　　　 }