webpack 基础一 1002

webpack 基础一

1.webpack开篇

2.webpack配置文件

2.1

js代码如下

const path = require("path");

module.exports = {
    /*
    mode: 指定打包的模式, 模式有两种
    一种是开发模式(development): 不会对打包的JS代码进行压缩
    还有一种就是上线(生产)模式(production): 会对打包的JS代码进行压缩
    * */
    mode: "development", // "production" | "development"
    /*
    entry: 指定需要打包的文件
    * */
    entry: "./index.js",
    /*
    output: 指定打包之后的文件输出的路径和输出的文件名称
    * */
    output: {
        /*
        filename: 指定打包之后的JS文件的名称
        * */
        filename: "bundle.js",
        /*
        path: 指定打包之后的文件存储到什么地方
        * */
        path: path.resolve(__dirname, "bundle")
    }
};

2.2 配置文件注意点

3.sourcemap

js代码

//在上面配置文件的基础上加上以下配置即可
   /*
配置sourcemap
development: cheap-module-eval-source-map
production: cheap-module-source-map
* */
devtool: "cheap-module-source-map",

4.接下来要学习各种各样的loader

4.1 loader基本概念

4.2 fileloader使用

4.3 loader其他配置

js代码如下

module: {
        rules: [
            {
                test: /\.(png|jpg|gif)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            // 指定打包后文件名称
                            name: '[name].[ext]',
                            // 指定打包后文件存放目录
                            outputPath: 'images/',
                            // 指定托管服务器地址(统一替换图片地址)
                            publicPath: 'http://www.it666.com/images/'
                        }
                    }
                ]
            }
        ]
    }

4.4 url-loader的使用

4.5 css-loader的使用

4.6 ES6-Module

来用js写一下

/*
ES6模块化的第一种方式
导出数据: export {xxx};
导入数据: import {xxx} from "path";
*/
/*
注意点:
1.如果是通过export {xxx};方式导出数据, 那么在导入接收的时候接收的变量名称必须和导出的名称一致
  究其原因是因为在导入的时候本质上是ES6的解构赋值
2.如果是通过export {xxx};方式导出数据, 又想在导入数据的时候修改接收的变量名称, 那么可以使用as来修改
  但是如果通过as修改了接收的变量名称, 那么原有的变量名称就会失效
*/

import {name} from "./a.js";//a.js中定义name

/*
下为解构赋值
let obj = {
    name: "lnj",
    age: 34
};
let {name, age} = obj;
console.log(name);
let {str, age} = obj; str是undefined
console.log(str);
console.log(age);
 */

//下为注意点2
import {name as str} from "./a.js";

console.log(name);//此时name啥也没了
console.log(str);


/*
ES6模块化的第二种方式
导出数据: export default xxx;
导入数据: import xxx from "path";
*/
/*
注意点:
1.如果是通过export default xxx;导出数据, 那么在接收导出数据的时候变量名称可以和导出的名字不一致
2.如果是通过export default xxx;导出数据, 那么在模块中只能使用一次export default
*/

// import name from "./b.js";此时两种方式都正确
import str from "./b.js";
console.log(str);


//此时下面使用了两次导出的操作,所以会报错
import name from "./b.js";
import age from "./b.js";
console.log(name);
console.log(age);



// 两种方式混合使用
import Person,{name, age, say} from "./c.js"; //c中定义了三个变量和一个Person类,采用不同的导出方式
let p = new Person();
console.log(p);

console.log(name);
console.log(age);
say();


//学习了es6的导入导出后,我们以前使用的require导入就可以换一种写法
// const icon = require("./lnj.jpg");
// const _ = require("./index.css");

import icon from "./lnj.jpg";
import "./index.css";

let oImg = document.createElement("img");
oImg.src = icon;
oImg.setAttribute("class", "size");//index.css中对图片进行了一些操作
document.body.appendChild(oImg);

4.7 less-loader

4.8 sass-loader

4.9 PostCSS-loader之补全前缀(棒呆了)

4.10 PostCSS-loader之转换px为rem(棒呆了)

在前边的项目中,为了适配屏幕,学习了许多适配方法,最常用的有通过rem适配,我们先通过图片大小以及屏幕大小计算根目录的fontsize(计算方法在前面的笔记),然后使用的时候我们需要这样来写,比如高度是300px,我们得写300/100rem(举个例子),现在有了PostCSS-loader就不用这么麻烦了.

4.11 css-loader 模块化

举个例子

import icon from "./lnj.jpg";
// import "./index.css"
import cssModule from "./index.css"//导入方式改变
import {addImage} from "./custom.js";

console.log(cssModule);
let oImg = document.createElement("img");
oImg.src = icon;
// oImg.setAttribute("class", "size");
oImg.setAttribute("class", cssModule.size);//使用方式改变
document.body.appendChild(oImg);

addImage();//这里是另一个js文件,如下
//本来在没有模块化时, less文件中的size类会对两张图片作用,而模块化后,只对当前文件的图片产生作用

/*
import icon from "./lnj.jpg";

function addImage() {
    let oImg = document.createElement("img");
    oImg.src = icon;
    oImg.setAttribute("class", "size");
    document.body.appendChild(oImg);
}
export {addImage};
*/

4.12 iconfont-loader使用

在js使用时

import "./font/iconfont.css"

document.body.innerHTML = "";