webpack 初学笔记

fzzkiddy
217 阅读4分钟

什么是webpack

对webpack 的通俗解释：模块打包机

  • 分析项目结构，找到JavaScript模块以及其他一些浏览器不能直接运行的拓展语言（Scss, TypeScript等），将其转 换和打包为合适的格式共浏览器使用。
  • webpack 的工作方式： 把你的项目当作一个整体，通过一个给定的主文件（如：index.js）,
  • Webpack 将从这个文件开始, 找到你项目的所有依赖文件，使用loaders处理它们。最后打包为一个或多个浏览器可识别的JavaScript文件。

使用webpack

    // 全局安装
    npm install -g webpack
    // 安装到项目目录
    npm install --save-dev webpack
    // 前提是项目中有package.json 文件
  • npm的start命令是一个特殊的脚本名称，其特殊性表现在，在命令行中使用npm start就可以执行其对于的命令，如果对应的>此脚本名称不是start，想要在命令行中运行时，需要这样用npm run {script name}如npm run build

注：“__dirname”是node.js中的一个全局变量，它指向当前执行脚本所在的目录。

__dirname 与process.cwd()的区别传送门

浏览器监听代码修改

npm install --save-dev webpack-dev-server

# 传送门: npm 中 --save 与 --save-dev 的区别

  • ExtractTextPlugin：分离CSS和JS文件 --webpack4.0 不支持这个插件
npm install --save-dev extract-text-webpack-plugin

// 替代插件： 
npm install extract-text-webpack-plugin@next
  • 清除缓存文件 clean-webpack-plugin
    npm install clean-webpack-plugin

webpack 中 hash, chunkhash, contenthash 的区别

前提： 解释一下chunk -- 打包后的代码块

hash是跟整个项目的构建相关，只要项目里有文件更改，整个项目构建的hash值都会更改，并且全部文件都共用相同的hash值

  • hash: 如果文件内容改变的话，那么对应文件哈希值也会改变
  • chunkhash: chunkhash和hash不一样，它根据不同的入口文件(Entry)进行依赖文件解析、构建对应的chunk， 生成对应的哈希值。我们在生产环境里把一些公共库和程序入口文件区分开，单独打包构建，接着我们采用chunkhash的方式生成哈希值，那么只要我们不改动公共库的代码，就可以保证其哈希值不会受影响。 案例： 采用chunkhash, 改变main.js代码块的内容
    chunkhash
    npm run build
  • 只更改/app/main.js 中的代码

chunkhash
更改后 build 时 webpack 打包后的文件只有更改了的文件名会改变chunkhash值
chunkhash

  • contenthash: 在chunkhash的例子，我们可以看到由于index.css被index.js引用了，所以共用相同的chunkhash值。但是这样子有个问题，如果index.js更改了代码，css文件就算内容没有任何改变，由于是该模块发生了改变，导致css文件会重复构建。 这个时候，我们可以使用extra-text-webpack-plugin里的contenthash值，保证即使css文件所处的模块里就算其他文件内容改变，只要css文件内容不变，那么不会重复构建。

webpack.config.js 配置文件（默认名）

Webpack 在执行的时候，除了在命令行传入参数，还可以通过指定的配置文件来执行

  • 默认情况下，会搜索当前目录的 webpack.config.js 文件，这个文件是一个 node.js 模块
  • 返回一个 json 格式的配置信息对象，或者通过 --config 选项来指定配置文件。
    webpackConfig
    // CommonJS 模块标识、定义
    module.exports = {
        // 入口文件 类型 string , array, object
        entry: {
            
           
            // 多个 入口文件 类型 :object
            : 
            ...
        },
        outut: {
            
        },
        module: {
            rules: [
                {
                    test: '',
                    use: {
                        
                    },
                    include:,
                    exclude:
                }
            ]
        },
        resolve: {
            extensions: ['.js', 'jsx', '.json'],
            modules: [
                path.resolve(__dirname, './src/'),
                'node_modules'
            ]
        }
        
    }
  • 模块的入口 类型 string , array, object, function
// 单入口文件
entry:  'index.js', ['index.js', 'main.js'] 
// 多入口文件，每个入口生成一个Chunk 
entry: { a: 'index.js' , b: 'main.js'} 
// 动态入口
// 同步
entry: () =>{
    return {
        a: './page/a',
        b: './page/b'
    }
}
// 异步
entry: () =>{new Promise((resolve) => {
    resolve({
        a: './page/a',
        b: './page/b'
    })
})}

  • module loader

    通过使用不同的loader，webpack有能力调用外部的脚本或工具，实现对不同格式的文件的处理，比如说分析转换scss为css，或者把下一代的JS文件（ES6，ES7)转换为现代浏览器兼容的JS文件，对React的开发而言，合适的Loaders可以把React的中用到的JSX文件转换为JS文件。

    • rules 数组
    //test 条件匹配
use { loader: 'style-loader'}

    // scss-loader
npm install sass-loader node-sass webpack --save-dev

    // css-loader , style-loader
npm install style-loader css-loader webpack --save-dev

  • resolve 如何寻找所对应的模块

    • extensions

      数组 自动添加文件的后缀， 引入的文件名可省略其扩展名 ex: ['.js', '.jsx']

    • modules : 数组 引用的模块路径可使用相对路径

    当引用的大量模块在./src 目录下是，可以设置：

    [path.resolve(__dirname, './src/'), 'node_modules']

*plugins 扩展插件

* html-webpack-plugin

webpack4.x下，压缩代码不在webpack.config.js中写

plugins: [ new webpack.optimize.UglifyJsPlugin() ],而是在package.json中的script下面写

avatar
文章
阅读
粉丝