webpack学习日记(一) 入门

最近看到了很多webpack的文章,十分有体会,在此将笔记整理出来;

1. 什么是webpack? 

webpack是一款将各种各样的模块打包在一起的工具,即万物皆可为模块化

2.如何开始使用:

创建一个空的项目,接下来

npm init
npm i --save-dev webpack webpack-cli

安装成功后,新建文件夹src,在里面创建src/index.js,src/index.css;

新建webpack.config.js,这个文件是webpack默认会加载的;

在里面进行入口文件,输出文件的配置:

module.exports = {
    // 配置开发环境
    mode:"development",
    //入口文件
  entry:"./src/index.js",
    // 输出文件
    output:{
        path:_dirname+"/dist",
        filename:"[name].[hash].js",
        // 所有资源引用的路径的前缀,可以相对,也可以绝对
       publicPath: "./"
    }
}

上面设置了入口文件与出口文件,其实也可以拥有多个入口文件:

   entry: {
        index: './src/index.js',
        test: './src/test.js'
    }

输出文件使用到了[name]与[hash],这两个都是webpack暴露出来的变量;

其中[hash]是根据内容的变化而产生的变量,每一次修改后都会不一样;

webpack中变量具体原理有时间再深入理解;

配置完毕后,我们在index.js中写上:

import "./index.css"

接下来,我们需要使用webpack的模块化系统去解析这段语句,但是webpack自身是不能识别出来的,怎么办呢?

这个时候webpack最出名的loader就可以大显身手了,所谓loader,是值webpack对模块导入的解析器;

这个时候执行:

npm i --save-dev css-loader style.loader

成功后,在webpack.config.js的module.exports里写上下面语句:

module:{
    test:/\.css/,
    use:["css-loader","style-loader"]
}

上面的语句含义指匹配到.css文件,然后分别使用css-loader与style-loader去处理它;

这个时候,或许你会有疑问?

css-loader跟style.loader都有什么作用啊?为什么要分别引用他们?

其实,css-loader的作用就是解析import "xxx.css",然后解析出来还不够啊,需要插入到页面去啊,这个时候就用到style-loader,将解析出来的css文件以<style></style>的形式插入到html中;

还有一个问题,我们的html文件还没创建呢,这个时候就需要用到html-webpack-plugin这个插件了,安装:

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

安装完之后在webpack.config.js中添加如下代码:

const HtmlConfigPlugin = require("html-webpack-plugin")
plugins:[new htmlCOnfigPlugin({
    title:"你好"
})]

这个插件非常好用,而且可以自定义html模板,title等;有兴趣可以去了解

好了,万事具备,接下来在cmd执行webpack

打包成功!

3.如何在node端以脚本的形式使用呢?首先创建scripts文件夹,创建start.js,添加以下内容:

const webpack = require("webpack");
// 引入配置文件
const config = require("../webpack.config");
// 将配置文件传入webpack
const compiler = webpack(config);


// 运行node版本的webpack

compiler.run(function (err,stats) {
    if(err){
        console.log(err);
    }else{
        console.log(stats.endTime-stats.startTime);
    }
})

然后,在package.json中,添加到scripts对象里面去;

 "build": "node ./script/start.js",

接着执行npm run build,就可以完成打包了;

基本上到这里,你就掌握了webpack的基本使用了,如果想继续深入,请接着看

3. 优化

打包成功了,但是我们会发现,由于hash,每次我们更新文件之后,都会出现不一样的js文件,手动删除太麻烦,那么怎么办呢?

如果是使用webpack-cli的,直接使用插件方式,然后在webpack.config.js进行配置

const CleanWepackPlugin = require("clean-webpack-plugin");

....config

       plugins: [
     .    ...
        //此处传入的是需要清理的文件夹
        new CleanWepackPlugin(['dist'])
    ]

思路二:

使用node提供的api来处理,在start.js添加如下代码:

// 删除文件以及相关文件夹下的内容
const removeDir = function(path){
    if(fs.existsSync(path)){
        fs.readdirSync(path).forEach(function (filename) {
            let curPath = path+"/"+filename;
            if(fs.lstatSync(curPath).isDirectory()){
                removeDir(curPath)
            }else{
                fs.unlinkSync(curPath)
            }
        });
        fs.rmdirSync(path)
    }
};
let curPath = path.resolve( __dirname , "../dist");
removeDir(curPath);

接着我们运行起来,就可以让系统自动帮我们清除文件了;

5. 创建webpack-dev-server

在vue-cli与create-react-app中,我们经常可以看到修改文件后刷新浏览器的功能,webpack中也提供了watch属性来进行模块重新编译,但是不能自动刷新浏览器;

这个时候,就需要用到webpack-dev-server了,安装

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

在config.js中引入,接着配置devServer

devServer:{
    // 配置devServer当前的目录
    contentBase:"./dist"
}

node端可以这样来做:

在package.json中添加如下代码:

"start": "webpack-dev-server --open"

直接执行npm run start就可以了;

dev-server原理点这里=>原理

6.生产环境配置

需要安装

npm i webpack-merge --save-dev

然后创建webpack.config.prod.js,创建webpack.config.dev.js,创建webpack.base.config.js;

webpack.base.config.js用来作为最基础的配置,其他两个文件分别用来配置不同环境的config

接着,添加

  // package.json
  {
      "scripts": {
          "start": "webpack-dev-server --open --config webpack.dev.conf.js",
          "build": "webpack --config webpack.prod.conf.js"
      }
  }

这样子就可以了;

7. 性能优化:

(1) tree shaking:移除JavaScript文件中的未使用到的代码;

那么如何配置呢?

看此文: tree-shaking

记住几个点:

    需要将babel中的module的modules属性设置为false,禁止es6转换,保留es6模块系统,

接着运行:

webpack --display-used-exports --optimize-minimize

就可以达到效果了;

8.PWA,可以在离线时变成代理服务器,让H5应用能媲美native-app;

它其实是运用了一种浏览器的缓存机制叫cacheStorage, 它提供了一个ServiceWorker类型的工作者或window范围可以访问的所有命名缓存的主目录, 并维护字符串的映射名称到相应的 Cache 对象。

具体实现就不写了,因为我也没实践过;

主要步骤是:主要是使用workbox-webpack-plugin,然后运用了navigator中的serviceWorker对象来进行操作;

 

本文参考掘金大佬的:浅入浅出webpack