vue简单学习-webpack

1、概念

webpack:是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。
官方地址：https://www.webpackjs.com/

2、好处

• 将许多碎小文件打包成一个整体，减少单页面内的衍生请求次数，提高网站效率。
• 将ES6的高级语法进行转换编译，以兼容老版本的浏览器。
• 将代码打包的同时进行混淆，提高代码的安全性。

3、使用

3.1、安装

本地安装

• npm install webpack --save-dev
• npm install webpack-cli --save-dev

全局安装：–推荐使用 后面要用

• npm install -g webpack
• npm install -g webpack-cli

3.2、js打包

3.2.1、js文件之间的导出和导入方式：

方式1：
a.js

import {util} from "./b";
//测试
let sum = util2.sum();
alert(sum+2);

b.js

export const util = {
    sum() {
        return 1;
    }
}

方式2：
a.js

import {util} from "./b";
//测试
let sum = util2.sum();
alert(sum+2);

b.js

const util ={
    sum(){
        return 2;
    }
}
export {util}

方式3：
a.js

import xxx from "./b"
//测试
let sum = util2.sum();
alert(sum+2);

b.js

export default {
    sum(){
        return 5;
    }
}

方式4：
a.js

import {util1,util2} from "./b";

b.js

const util1 = {
    sum(){
        return 11;
    }
}
const util2 = {
    sum(){
        return 22;
    }
}
export {util1,util2}

3.2.2、js打包-配置文件

webpack ./js/a.js -o ./dist/bundle.js

每次都要使用这个命令，比较麻烦，可以使用一个配置
新建webpack.config.js 文件

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

3.3、css加载

3.3.1、步骤一

• npm install style-loader --save-dev
• npm install css-loader --save-dev

3.3.2、步骤二

c.js

let d = require("./d.js");
let c = "ccccccccccccccccccccccc";
console.debug(c,d)
require("../css/index.css")

d.js

//commonjs语法规范
define(function () {
    return "1qqqqqqqqqqqqq"
})

3.3.3、步骤三

在webpack.config.js文件引入下面代码

var path = require("path");
module.exports = {
    entry: './js/c.js',
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: 'bundle2.js'
    },
    module: {
        rules: [
            {
                test: /\.css$/,     //匹配文件规则
                use: ['style-loader', 'css-loader']    //匹配后使用什么加载器进行模块加载
                // webpack use的配置，是从右到左进行加载的
            },
        ]
    }
}

3.3.4、步骤四

打包：webpack