风尚学Webpack-入门篇

Posted 2022-01-23 风尚云网

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了风尚学Webpack-入门篇相关的知识，希望对你有一定的参考价值。

风尚学Webpack-基础篇核心概念（2）_风尚云网-CSDN博客风尚学Webpack-基础篇核心概念（2）https://blog.csdn.net/zsx0806/article/details/122198850

图片来自webpack官网logo

loader的一些方法：

插件：

html-webpack-pluginhtml模板插件

loader的一些方法：

css-loader- 处理css文件 style-loader-把css插入到header

less-loader-处理.less MiniCssExtractPlugin.loader-压缩抽出css-loader

file-loader-处理文件，图片 url-loader-当文件比较小转成base64（减少一http请求）

image-webpack-图片压缩

插件：

html-webpack-plugin
html模板插件

命令script：

“script”:
"build":"webpack"，
“serve”:"webpack serve"

webpack 如何优化项目

css优化压缩 css-minimizer-webpack-plugin

图片优化 image-webapck压缩图片 file-loader base64格式

js优化压缩

optimization: 
  minimizer: [
     new CssMinimizerPlugin(),
     new TerserWebpackPlugin(),
],

devtool与sourceMap:

devtool: "source-map", // enum
devtool: "inline-source-map", // 嵌入到源文件中
devtool: "eval-source-map", // 将 SourceMap 嵌入到每个模块中
devtool: "hidden-source-map", // SourceMap 不在源文件中引用
devtool: "cheap-source-map", // 没有模块映射(module mappings)的 SourceMap 低级变体(cheap-variant)
devtool: "cheap-module-source-map", // 有模块映射(module mappings)的 SourceMap 低级变体
devtool: "eval", // 没有模块映射，而是命名模块。以牺牲细节达到最快。
// 通过在浏览器调试工具(browser devtools)中添加元信息(meta info)增强调试
// 牺牲了构建速度的 `source-map' 是最详细的。

异步加载 import(xxx).then()

预加载 import(/* webpackPrefetch: true */ 'jquery')

hash命名 hash

chunkhash 如果入口发生变化就会发生变化

contenthash 如果内容发生变化名称发生变化

摇树 tree shaking

按需导入js 借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。

代码分包 splitChunks

optimization: 
    splitChunks: 
        chunks: "all", 
        // 所有的 chunks 代码公共的部分分离出来成为一个单独的文件,
,

别名

resolve: 
    alias: 
      '@': path.resolve(__dirname, './src'), //设置@为src目录的别名
    
,

静态目录

new CopyWebpackPlugin(  // 设置静态目录（拷贝文件到另外一个文件夹）
    patterns:[  
    //  from: __dirname+'/public', to: __dirname+'/dist' ,
    //from 从， to 到 __dirname 当前目录
     from: __dirname+'/src/static', to: __dirname+'/dist/static' ,
    ],
			 
 ),

webpack搭建一个vue脚手架cli

安装依赖：vue源文件 vue npm i Vue -S

vue  npm i Vue -S

2.处理.vue文件 vue-loader

vue-loader

3.处理vue样式 vue-style-loader

vue-style-loader

4.编译template模板文件 vue-template-compiler

vue-template-compiler

5.热更新vue-hot-reload-api

vue-hot-reload-api

webpack // 导入vue插件

const VueLoaderPlugin = require('vue-loader/lib/plugin');


// 实例化vue插件
 new VueLoaderPlugin(),

配置

loader
 //vue 解析
  test: /\\.vue$/,
  loader: 'vue-loader',
  options: 
     loaders:  //开发环境使用style-loader打包
      css: ['style-loader', 'css-loader'],
      less: ['style-loader', 'css-loader', 'less-loader']
    
  
  ,

多入口打包

入口：

entry: 
  vue: './src/main.js',
  base: './src/index.js'
,

new HtmlWebpackPlugin(
  // 指定模板文件
  filename: 'index.html',
  template: './public/index.html',
  chunks: ['vue'], //指定vue入口打包进来
),
new HtmlWebpackPlugin(
  filename: 'base.html',
  template: './public/base.html',
  chunks:['base'], //指定base入口打包
),

跨平台传递参

cross-env:

package.json
"build": "cross-env NODE_ENV=production webpack",
    "serve": "cross-env NODE_ENV=development webpack serve",

获取
process.env.NODE_ENV

作用：根据不同的参数可以切换不同的配置项切换环境

webpack 如何指定配置文件

Webpack 在执行的时候，除了在命令行传入参数，还可以通过指定的配置文件来执行。默认情况下，会搜索当前目录的 webpack.config.js 文件，这个文件是一个 node.js 模块，返回一个 json 格式的配置信息对象，或者通过 --config 选项来指定配置文件。

webpack-merge 配置抽离方法

webpack-merge可以帮助我们引入公共配置进入dev和prod

//安装

npm install webpack-merge -D

Webpack-merge 提供了一个函数，该函数将数组串联并合并创建新对象的对象。如果遇到函数，它将执行它们，通过算法运行结果，然后再次将返回的值包装在函数中

语法：

// 默认的方式
const output = merge (object1, object2, object3, ...);

// 数组对象
// 这适用于所有可用的功能。
const output = merge ([object1, object2, object3]);

// 右边优先
const output = merge (
   fruit: "apple", color: "red" ,
   fruit: "strawberries" 
);

学习累了就来风尚云网：风尚云网风尚云网提供了编程的基础技术游戏, HTML、CSS、javascript等各种小游戏，也提供了强大的在线搜索功能，实用，有趣http://www.fengshangyunwang.cn/