webpack

webpack提供了模块化支持，代码压缩混淆，解决js兼容问题，性能优化等特性，提高了开发效率和项目的可维护性

2020322114140

全局安装

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

使用

编写代码

import $ from 'jquery'

$(function(){
    $('li:odd').css('backgroundColor','pink');
    $('li:even').css('backgroundColor','lightblue');
})

编写webpack.config.js

module.exports = {
    mode:"development"//可以设置为development(开发模式)，production(发布模式)
}

package.json增加一个脚本

"scripts": {
    "dev":"webpack"
  }

执行npm run dev

自定义打包入口与出口

const path = require("path");
module.exports = {
    mode:"development",
    //设置入口文件路径
    entry: path.join(__dirname,"./src/xx.js"),
    //设置出口文件
    output:{
        //设置路径
        path:path.join(__dirname,"./dist"),
        //设置文件名
        filename:"res.js"
    }
}

使用webpack-dev-server

安装

npm install webpack webpack-dev-server html-webpack-plugin --save-dev

package.json

{
  ...
  "scripts": {
    "dev":"webpack-dev-server --inline --hot --open --port 5008"
  }
}

配置webpack.config.js

//引用html-webpack-plugin插件，作用是根据html模板在内存生成html文件，它的工作原理是根据模板文件在内存中生成一个index.html文件。
var htmlwp = require('html-webpack-plugin');
module.exports={
    entry:'./src/main.js',  //指定打包的入口文件
    output:{
        path : __dirname+'/dist',  // 注意：__dirname表示webpack.config.js所在目录的绝对路径
        filename:'build.js'		   //输出文件
    },
    devtool: 'eval-source-map',
    plugins:[
        new htmlwp({
            title: '首页',  //生成的页面标题<head><title>首页</title></head>
            filename: 'index.html', //webpack-dev-server在内存中生成的文件名称，自动将build注入到这个页面底部，才能实现自动刷新功能
            template: 'vue_02.html' //根据vue_02.html这个模板来生成(这个文件请程序员自己生成)
        })
    ]
}

运行

npm run dev

loader

通过loader打包非js模块：默认情况下，webpack只能打包js文件，如果想要打包非js文件，需要调用loader加载器才能打包

css loader

{
  ...
   module : {
        rules:[
            {
                //test设置需要匹配的文件类型，支持正则
                test:/\.css$/,
                //use表示该文件类型需要调用的loader
                use:['style-loader','css-loader']
            }
        ]
    }
}

可以直接在js中引入css

import './style.less'

babel loader

将高级js语法转为低级语法

安装

npm install babel-loader @babel/core @babel/runtime -D
npm install @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D

babel.config.js

module.exports = {
    presets:["@babel/preset-env"],
    plugins:[ "@babel/plugin-transform-runtime", "@babel/plugin-proposal-class-properties" ]
}

添加

{
    test:/\.js$/,
    use:"babel-loader",
    //exclude为排除项，意思是不要处理node_modules中的js文件
    exclude:/node_modules/
}

调试

var add = function (x, y) {
    debugger
    return x+y+1;
}

打包发布

"build":"webpack -p"