weboack的搭建

Posted ```飞翔的翅膀```

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了weboack的搭建相关的知识,希望对你有一定的参考价值。

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,        ...    ,
    

以上是关于weboack的搭建的主要内容,如果未能解决你的问题,请参考以下文章

weboack的搭建

weboack的简单使用(commonJs与es6)

weboack的简单使用(commonJs与es6)

办公室共享平台建立,求助,求助!!!

使用NuGet.Server搭建公司内部的Nuget(包)管理器

搭建公司内部的NuGet服务器