vue怎么使用eval_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

输入代码:

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

项目根目录命令行执行：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"
  }