Vue - webpack packed js file

Introduction

webpack static resources is a front-end packaging tool that allows browsers also support modular. It Static analysis module of a dependency, then the generation of static resource modules corresponding to the specified rules.

Official website: https://webpack.docschina.org/

The role of webpack are the following points:

webpack core mainly javascript resource pack.

It is combined with other tools, will be a variety of static resources css, png, sass classified converted to a static file, so you can reduce the request page.
Babel tool can be integrated to achieve EcmaScript 6 turn EcmaScript 5, solve the compatibility problem.
It can be integrated http server.
Thermal loading module can be integrated, when the code is changed automatically refresh the browser function and the like.

installation

Global Installation:

Not recommended global installation webpack, global installed webpack, when packaged items, use is that you install on your computer webpack, if the project to another person's computer, he may be older versions of webpack installed on, so it may relate to compatibility issues. And if he is not installed in the global webpack can not be packaged.

# Install the latest version 
npm install - , Ltd. Free Join WebPACK 

# or install a specific version of 
npm install - , Ltd. Free Join WebPACK @ <Version>

If the installation above is webpack v4 + version, you also need to install the CLI, use the command line webpack

npm install --global webpack-cli

-G can view the global installation by npm root directory

If installed, the command line window webpack command is unavailable, manually configure the environment variables global catalog

My Computer -> Right Properties -> Advanced System Settings -> Advanced -> Environment Variables -> System Variables -> path -> add the path to the top at the end, remember to use the front; separated by a semicolon

And then re-open the cmd command line window, enter webpack -v can be used

Global installed [email protected] and [email protected]

-g [email protected] above sea level and 
altitude, and -g [email protected]

After installation check the version number. If there is a reminder in red, it does not matter to ignore it

webpack -v

Simple to use

New directory structure is as follows:

In webpack-demo2 execute the following directory file source packaging js

E: \ vue \ npm-demo \ Webpack-demo2> Webpack ./src/main.js -o ./dist/bundle.js

js ./dist/bundle.js represents all the files packaged in the dist bundle.js file directory,. / src / main.js all js file entry

webpack.config.js

Whenever js modify the contents of the file, should webpack repackage, when packaged to specify inlet and outlet is too much trouble, can be resolved by configuring

Creating webpack.config.js profile in webpack-demo2 directory, the file in the same directory with src

Wrote as follows in webpack.config.js

// introduction path node in the module, the processing of the file path gadget 
const = path the require ( 'path' )

// 导出一个webpack具有特殊属性配置的对象
module.exports = {
    mode: 'none', // 指定模式配置："development" | "production" | "none"
    // 入口
    entry: './src/main.js', // 入口模块文件路径 
    // 出口
    output: {
        // path: './dist/', 错误的，要指定绝对路径
        path: path.join(__dirname, './dist/'), //打包的结果文件生成的目录要是绝对路径
        filename: 'bundle.js' 
    }
}

然后就可以执行下面的命令进行打包了，不需要再输入入口和出口了

webpack

如果没有mode参数，则会出现黄色警告。

本地安装

本地安装的时候，建议把webpack安装到devDependencies 开发依赖 ( --save-dev ) 中，因为 webpack 只是一个打包工具，项目如果需要上线，上线的是打包的结果，而不是这个工具。

所以我们为了区分生产环境和开发环境依赖，通过 --save （生产环境）和 --save-dev （开发环境）来区分。

为了测试本地安装，先把全局安装的 webpack 和 webpack-cli 卸载掉

npm uninstall -g webpack
npm uninstall -g webpack-cli

在webpack-demo2中，使用npm init -y 初始化，会生成一个package.json的文件，后面要用到。

本地安装命令

# 安装最新版本
npm install --save-dev webpack  
# 安装特定版本
npm install --save-dev webpack@<version>

如果上面安装的是 webpack v4+ 版本, 还需要安装 CLI , 才能使用 webpack 命令行

npm install --save-dev webpack-cli

# 1. 进入到 webpack-demo2
cd e:\vue\npm-demo\webpack-demo2

# 2. 初始化项目 `-y` 是采用默认配置
npm init -y

# 3. 安装 v4.35.2 ，不要少了 v
npm i -D [email protected]

# 安装 CLI
npm i -D [email protected]

安装完执行webpack -v会报错

在本地安装的 webpack ，要通过在项目文件夹下 package.json 文件中的 scripts 配置命令映射

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "show": "webpack -v",
    "start": "node ./src/main.js",
    "build": "webpack"
  },

然后查看版本号就使用下面的命令

npm run show

运行 main.js 模块：

npm run start

注意：如果命令映射的别名是 start ，可省略 run 进行简写执行，即：

npm start

打包构建

npm run build

自动打包

前面我们修改了代码之后，都要手动打包，这样很浪费我们的时间，那我们想当我们修改了代码之后能不能自动帮我们完成打包，答案当然是可以的，只需要在package.json的script里加上watch参数就可以了

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "show": "webpack -v",
    "start": "node ./src/main.js",
    "build": "webpack",
    "watch": "webpack --watch"  // 加上这个就可以自动帮我们打包了
  },

添加上watch参数之后，在命令行执行npm run watch，程序会阻塞状态，当我们更改代码之后，自动会帮我们完成打包

导入导出模块

上面我们的webpack-demo2下有个src文件夹，里面有两个js文件，一个是bar.js，一个是main.js。main.js是主入口，引用了bar.js文件，既然要用到bar.js里的，那我们就要在bar.js里导出，然后再main.js里导入

导出默认成员

默认成员只能有一个，要不然会报错。

export default 成员

bar.js

// ES6 注意 一个模块文件中，只能导出一个默认成员，注释掉一个
export default function() {  // 导出函数
    console.log('我是bar模块--ES6')
}


export default { // 导出对象
    name: '邹邹'
}

要在main.js文件里使用bar.js文件里的内容，还要在main.js里导入

main.js

// Es6 导入默认成员
import bar from './bar'

bar()  // 调用函数


console.log(bar)
console.log(bar.name)  // 对象的属性值

导出非默认成员

默认成员只能导出一个，非默认成员可以导出多个。

非默认成员必须要有成员名称

bar.js

// ES6 可以导出多个非默认成员
export const x = 'xxx'
export var y = 'yyy'

export function add (a, b) {
    return a+b
}

// export z = 'zzz' 错误的，没有数据类型
// export 'wwww' 错误的，没有变量名和类型
// export function (x, y) { 错误的，没有函数名
//     return x+y
// }

main.js

// Es6 导入非默认成员
// 通过 解构赋值 的方式 来加载成员
// x 对应的是bar.js 模块中的 x 成员 ，y对应y成员，ad对应add成员 函数
import {x, y, add} from './bar'
console.log(x, y, add(10, 20))

// 通过解构赋值按需导入你需要的成员 
import {x, y} from './bar'
console.log(x, y)

// 会将默认成员 与 非默认成员 全部导入
import * as bar2 from './bar'
console.log(bar2, bar2.x, bar2.y, bar2.add(1,2))