weboack的搭建

Posted 2021-05-23 Surua puoli syd�nt�

1.webpack是什么

• webpack是一个模块化构建打包工具
• vue,react用的脚手架底层都是基于webpack搭建的
• webpack在公司中主要用于公司内部搭建前端环境
• 掌握node,webpack可以说是晋升架构师升的重要一环！
• 如果你会了webpack,你在vue脚手架中也可以轻松的配置
• 构建工具除了webpack之处，还有grunt,gulp,rollup…

2.webpack使用

webpack中文文档：https://webpack.docschina.org/concepts/

学习目标：用webpack,node,vue手动搭建一个前端环境

2.1 创建package.json

npm init -y

2.2 安装webpack，webpack-cli

npm install webpack webpack-cli -D

2.3 写点测试代码测试

webpack对原生JS和json文件默认支持

webpack支持的模块规范：CommonJS(require,module.exports),ES6(export ,import)，AMD(require.js)

2.4运行 npm scripts脚本

{
  ....
  "scripts": {
    "build": "webpack --watch"
  },
  .....
}

2.5 loader

loader:webpack资源加载器，因为webpack只支持js,json文件，对其他格式文件不支持，如果想要支持其他类型的文件，必须通过loader去转换这些文件，从而让webpack支持

经典的loader没有的错误：

You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file

2.5.1 webpack常用loader

1、css想着的loader:style-loader,css-loader
2、图片loader:
    webpack4.x:需要安装安装loader,并配置 file-loader,url-loader
    
    例如： {test:/\\.(png|jpg|jpeg|gif|svg)/i,use:['file-loader']}
    webpack5.x:不用安装loader,直接调用内置的asset modules直接配置使用
    
     {test:/\\.(png|jpg|jpeg|gif|svg)/i,type:'asset/resource'},
3、解析sass
	npm i sass-loader node-sass -D
	
	 {test:/\\.s(a|c)ss/i,use:["style-loader","css-loader","sass-loader"]}
	 
4. 解析less
   npm i less less-loader -D
   
    {test:/\\.less$/i,use:['style-loader','css-loader','less-loader']}
5.解析svg与图片的解析规则一致

   { test: /\\.(png|jpg|jpeg|gif|svg)/i, type: 'asset/resource' }
   
6.解析ES6/7/8/9.....
    ES新语法通过babel转换，让浏览器支持
    
    第一步：安装babel依赖
      npm install --save-dev babel-loader @babel/core  @babel/preset-env
   
    第二步：配置webpack.config.js
         {
               test: /\\.js$/,
               //排除node_modules
               exclude: /node_modules/,
               use: {
               loader: "babel-loader",
               options: {
               presets: ['@babel/preset-env']
               }
               }
           }
           
     第三步：创建babel.config.json
     {
      "presets": ["@babel/preset-env"]
    }

2.6 创建webpack配置文件，让webpack构建更强大

webpack默认配置文件：webpack.config.js

代码如下：

const path=require('path')

module.exports = {
    //项目入口js
    entry: './src/main.js',
    //项目出口，项目打包后最终的文件位置
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    }


}

2.7 自动创建html并注入静态资源文件

html-webpack-plugin

安装： npm i --save-dev html-webpack-plugin

    //实例化插件，以增强webpack的功能
    plugins: [
        new HtmlWebpack({
            //模板文件
            template: './public/index.html',
            //打包后的html位置和文件名
            filename:'home.html'
        })
    ]

2.8 抽取css到单独的css文件中

安装：
npm install --save-dev mini-css-extract-plugin

参考：https://webpack.docschina.org/plugins/mini-css-extract-plugin/#root

2.9 打包好的文件分类管理和清理无用的文件

• 静态资源分类管理

  js: output: { //指定打包后的文件名 filename: ‘js/bundle[hash].js’, },图片 output: { assetModuleFilename: ‘images/pic[hash][ext]’, },css: 第一步：在webpack.config.js引入mini-css-extract-plugin’ const MiniCssExtractPlugin = require(‘mini-css-extract-plugin’); 第二步：在module.rules中配置 { test: /.css$/i, use: [MiniCssExtractPlugin.loader, ‘css-loader’] }, 第三步：实例化MiniCssExtractPlugin plugins: [ new MiniCssExtractPlugin({ filename:‘css/global.css’ })

• 清理无用的文件

    output: {        ...        clean:true,        ...    },