自学webpack

webpack

webpack是什么

webpack是一个现代JavaScript应用程序的静态模块打包器。

打包的场景

为什么要打包

逻辑多，文件多，项目复杂度提高了。

在打包之外 ，他还进化出了翻译官技能（loader）

 

webpack.config.js

const path = require('path')
​
//1. 导入HTML插件，得到一个构造函数
const HtmlPlugin = require("html-webpack-plugin");
//2. 创建HTML插件的实例化对象
const htmlPlugin = new HtmlPlugin({
    template: './src/index.html',//指定源文件存放路径
    filename: './index.html'     //指定生成文件存放路径
    //HTML插件在生成的index.html页面，自动注入了打包的index.js文件
})
​
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
//使用nodejs中的导出语法，向外导出一个webpack的配置对象
module.exports = {
    mode: "development",
    //mode用来指定构建模式，可选有develoment和production
    //开发时候一定要用development，因为追求的是打包的速度，而不是体积
    //反过来，发布上线的时候一定能要用production，因为上线追求的是体积小，而不是打包速度快
​
​
    //entry：指定要处理哪些文件
    entry: path.join(__dirname, './src/index.js'),
​
    //指定生成的文件要放到哪里
    output: {
        //存放的目录
        path: path.join(__dirname, 'dist'),
        //生成的文件名
        filename: 'js/bundle.js'
    },
​
    //插件的数组，将来webpack在运行时，会加载并调用这些插件
    plugins: [htmlPlugin, new CleanWebpackPlugin()],//3. 通过plugins节点，使htmlPlugin插件生效
​
    devServer: {
        //首次打包成功后，自动打开浏览器
        open: true,
        //在http协议中如果端口号是80，则可以被省略
        port: 8081,
        //指定运行的地址
        host: '127.0.0.1'
    },
​
​
​
​
​
    //既暴露行号，又暴露源码source-map极为不推荐
    //在开发调试阶段，建议大家都把devtool的值设置为eval-source-map
    // devtool: 'eval-source-map',
    // 在实际发布的时候建议大家把devtool的值设置为nosources-source-map或直接关闭SourceMap
    devtool: 'nosources-source-map',
    //1.开发环境下
    // 建议把devtool的值设置为eval-source-map
    // 好处：可以精准定位到具体错误行
    //2. 生产环境下
    // 建议关闭Source Map或将devtool的值设置为nosources-source-map
    // 好处：防止源码泄露，提高网站的安全性
​
​
​
​
​
​
​
​
    module: {
        rules: [
            //定义了不同模块对应的loader
            { test: /\.css$/, use: ['style-loader', 'css-loader'] },
            //处理.less文件的loader
            { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
            //处理图片文件的loader
            //如果需要调用的loader只有一个，则只传递一个字符串也行，如果有多个loader，则必须指定数组
            { test: /\.jpg|png|gif$/, use: 'url-loader?limit=229&outputPath=images' },
            //limit用来指定图片大小，单位是字节（byte）
            //只有≤limit大小的图片才会被转成base64格式的图片
​
​
            // { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }
​
​
        ]
    },
​
​
    resolve: {
        alias: {
            //告诉webpack，程序员写的代码中@符号表示src这一目录
            "@": path.join(__dirname, "./src/")
        }
    }
}

index.js

import $ from 'jquery'
​
//导入样式，（在webpack中，一切皆模块，都可以通过ES6导入语法进行导入和使用）
​
//如果某个模块中，使用from接收到的成员为undefined，则没必要进行接收
import './css/index.css'
//1.webpack默认只能打包处理.js结尾的文件，处理不了其他后缀的文件
//2.由于代码中包含了index.css这个文件，因此webpack默认处理不了
//3.当webpack发现某个文件处理不了是，会查找webpack.config.js这个配置文件，看module.rules数组中，是否匹配了对应的loader加载器
//4.webpack把index.css这个文件，先转交给最后一个loader进行处理（先转交css-loader）。
//5.当css-loader处理完毕以后，会把处理结果，转交给下一个loader（转交给style-loader） 
//6.当style-loader处理完毕以后，发现没有下一个loader了，于是把处理的结果转交给了webpack
//7.webpack把style-loader处理的结果，合并到/dist/main.js中，最终生成打包好的文件
​
​
​
​
import './css/index.less'
​
​
​
​
// 1.导入图片，得到图片文件
import logo from './images/logo.png'
​
//2.给img标签的src动态赋值
$('.box').attr('src', logo)
//
$(function () {
    // 实现奇偶行变色
    //奇数行为红色
    $('li:odd').css('background-color', 'red');
    $('li:even').css('background-color', 'cyan');
})
​
​
​
// function info(target) {
//     target.info = "Person info"
// }
​
// @info
// class Person { }
​
// console.log(Person.info)