Webpack

webpack是一个现代的js应用的静态模块打包工具，依赖于node环境

从图中我们可以看出，webpack将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求

全局安装

npm i webpack -g

在项目中安装

npm i webpack --save-dev

mathUtils.js:

function add(num1, num2) {
    return num1 + num2
}

function mul(num1, num2) {
    return num1 * num2
}

module.exports = {
    add,
    mul
}

main.js:

//使用commonjs模块化的规范
const {
    add,
    mul
} = require('./js/mathUtils')

console.log(add(20, 13));
console.log(mul(20, 30));

webpack ./src/main.js -o ./dist/bundle.js

如果webpack版本较低

webpack ./src/main.js  ./dist/bundle.js

<script src="./dist/bundle.js"></script>

打开浏览器

npm init

webpack.config.js

const path = require('path')

module.exports = {
    entry: './src/main.js', //入口文件
    output: {
        //绝对路径
        //_dirname是node.js中的全局变量，指向当前执行脚本所在的目录
        path: path.resolve(__dirname, 'dist'), //打包后文件存放的位置
        filename: 'bundle.js',//打包后的文件名
    },
}

我们可以通过webpack代替 webpack ./src/main.js -o ./dist/bundle.js 的命令进行打包，这样就方便很多

"scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "build": "webpack"
  },

我们就可以通过npm run build对文件进行打包

Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。loader可以加载css、图片，也包括一些高级的，将ES6转成ES5代码，将TypeScript转成ES5代码，将scss、less转成css，将.jsx、.vue文件转成js文件等等。

normol.css

body {
    background-color: aqua;
}

require('./css/normol.css')

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

webpack.config.js

module.exports = {
    module: {
        rules: [{
            test: /.css$/,
            use: ['style-loader', 'css-loader']
        }]
    }
}

special.less

@fontSize:50px;
@fontColor:red;

body{
    font-size: @fontSize;
    color: @fontColor;
}

require('./css/special.less')
document.writeln("<h2>你好啊hhhghfgkg</h2>")

npm install --save-dev less-loader less

webpack.config.js

module.exports = {
    module: {
        rules: [{
            test: /.less$/,
            use: [{
                loader: "style-loader" // creates style nodes from JS strings
            }, {
                loader: "css-loader" // translates CSS into CommonJS
            }, {
                loader: "less-loader" // compiles Less to CSS
            }]
        }]
    }
}

normol.css

body{
    background: url("../img/1.jpg");
}

npm install --save-dev url-loader

webpack.config.js

module.exports = {
    module: {
        rules: [{
            test: /.(png|jpg|gif)$/,
            use: [{
                loader: 'url-loader',
                options: {
                    limit: 130000,
                },
            }]
        }]
    }
}

打开看图片

当加载的图片小于limit时，会将图片编译成base64字符串形式

normol.css

body{
    background: url("../img/2.jpg");
}

在用npm run build 打包，发现开始报错

报错说没有file-loader的模块，所以进行下载

npm install --save-dev file-loader

再次用npm run build 进行打包，却发现浏览器进行报错

dist文件下却多了一张图片，名字为hash:6127b9bcf1ab0d897b0837b6f2360217.jpg

打开浏览器发现图片的地址路径错误

所以在webpack.config.js中进行配置

const path = require('path')

module.exports = {
    entry: './src/main.js',
    output: {
        //绝对路径
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
        publicPath: 'dist/'
    },
    module: {
        rules: [{
            test: /.(png|jpg|gif)$/,
            use: [{
                loader: 'url-loader',
                options: {
                    limit: 130000,
                    name: 'img/[name].[hash:8].[ext]' //图片的命名及路径
                },
            }]
        }]
    }
}

npm install babel-loader babel-core babel-preset-env webpack
npm i @babel/core --save-dev
npm i @babel/preset-env --save-dev

webpack.config.js

module.exports = {
    module: {
        rules: [{
            test: /.js$/,
            //exclude：排除  include：包含
            exclude: /(node_modules|bower_components)/,
            use: {
                loader: 'babel-loader',
                options: {
                    presets: ['@babel/preset-env']
                }
            }
        }, ]
    }
}

App.vue

<template>
  <div>
    <h2 class="title">{{message}}</h2>
    <button @click="btn">按钮</button>
    <h3>{{name}}</h3>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      message: "hello world",
      name: "hhhhhh"
    };
  },
  methods: {
    btn() {}
  }
};
</script>

<style>
.title {
  color: yellow;
}
</style>

import Vue from 'vue'
import App from './vue/App.vue'
new Vue({
    el: '#app',
    template: `<App></App>`,
    components:{
        App
    }
})

npm i vue --save
npm i vue-loader vue-template-compiler --save-dev

webpack.config.js

module.exports = {
    module: {
        rules: [{
            test: /.vue$/,
            use: ['vue-loader']
        }]
    }
}

const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
    plugins: [
        new VueLoaderPlugin(),
    ],
}

module.exports = {
    resolve: {
        //别名
        alias: {
            'vue$': 'vue/dist/vue.esm.js'
        },
        extensions: ['.js', '.css', '.vue']
    },
}

<body>
    <div id="app"></div>
</body>

1）plugin是插件的意思，通常是用于对某个现有的架构进行扩展。
2）webpack中的插件，就是对webpack现有功能的各种扩展，比如打包优化，文件压缩等等。
3）loader和plugin区别

• loader主要用于转换某些类型的模块，它是一个转换器。
• plugin是插件，它是对webpack本身的扩展，是一个扩展器。

4）plugin的使用过程∶

• 步骤一︰通过npm安装需要使用的plugins(某些webpack已经内置的插件不需要安装)
• 步骤二︰在webpack.config.js中的plugins中配置插件。

作用是依据一个简单的index.html模板，生成一个自动打包后的文件index.hml

npm i html-webpack-plugin --save-dev

const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    output: {
        //绝对路径
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
        // publicPath: 'dist/'
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: 'index.html'  //模板
        }),
    ],
}

webpack提供了一个可选的本地开发服务器，这个本地服务器基于node.js搭建，内部使用express框架，可以实现我们想要的让浏览器自动刷新显示我们修改后的结果。

devserver也是作为webpack中的一个选项，选项本身可以设置如下属性∶

• contentBase:为哪一个文件夹提供本地服务，默认是根文件夹，我们这里要填写./dist
• port:端口号
• inline:页面实时刷新
• historyApiFallback :在SPA页面中，依赖HTML5的history模式

npm i webpack-dev-server --save-dev

"scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "build": "webpack",
    "dev": "webpack-dev-server --open"  //--open参数表示直接打开浏览器
  },

npm run dev

const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    entry: './src/main.js',
    mode: 'development',
    output: {
        //绝对路径
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
        // publicPath: 'dist/'
    },
    module: {
        rules: [{
                test: /.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /.less$/,
                use: [{
                    loader: "style-loader" // creates style nodes from JS strings
                }, {
                    loader: "css-loader" // translates CSS into CommonJS
                }, {
                    loader: "less-loader" // compiles Less to CSS
                }]
            },
            {
                test: /.(png|jpg|gif)$/,
                use: [{
                    loader: 'url-loader',
                    options: {
                        limit: 130000,
                        name: 'img/[name].[hash:8].[ext]' //图片的命名及路径
                    },
                }]
            },
            {
                test: /.js$/,
                //exclude：排除  include：包含
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            },
            {
                test: /.vue$/,
                use: ['vue-loader']
            }
        ]
    },
    plugins: [
        new VueLoaderPlugin(),
        new HtmlWebpackPlugin({
            template: 'index.html'
        }),
    ],
    resolve: {
        //别名
        alias: {
            'vue$': 'vue/dist/vue.esm.js'
        },
        extensions: ['.js', '.css', '.vue']
    },
}

//使用commonjs模块化的规范
const {
    add,
    mul
} = require('./js/mathUtils')

console.log(add(20, 13));
console.log(mul(20, 30));

require('./css/normol.css')

require('./css/special.less')
document.writeln("<h2>你好啊hhhghfgkg</h2>")

import Vue from 'vue'
// // import App from './vue/app'

// //先下载npm i vue-loader vue-template-compiler --save-dev
import App from './vue/App.vue'

new Vue({
    el: '#app',
    template: `<App></App>`,
    components:{
        App
    }
})