ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

Webpack基础 ->(个人学习记录笔记)

2021-07-30 08:35:34  阅读:142  来源: 互联网

标签:记录 webpack 笔记 loader Webpack dev path js css


@

目录

Webpack官网

官网链接

1. 认识webpack

  • 一个线代的JavaScript应用的静态模块打包工具
    在这里插入图片描述

2. webpack的安装

管理员模式运行cmd

npm i -g webpack
npm i -g webpack-cli

在这里插入图片描述

3. webpack的起步

  • 打包 入口文件 -o 保存路径
  • webpack ./src/main.js -o ./dist/bundle.js

在这里插入图片描述
配置打包文件开发模式、生产模式

module.exports={
  // mode: 'production',
  mode: 'development',
}
  • main.js
//1. 使用commonjs模块化规范
const {add,mul} = require('./mathUtils')
console.log(add(20, 30));
console.log(mul(20, 30));

//2. 使用ES6的模块化的规范
import {name,age,height} from './info'
console.log(name);
console.log(age);
console.log(height);
  • info.js
//ES6导出
export const name = 'why';
export const age = 18;
export const height = 1.88;
  • mathUtils.js
function add(num1, num2) {
  return num1 + num2;
}

function mul(num1, num2) {
  return num1 * num2;
}

//commonjs导出
module.exports = {
  add,
  mul
}

4. webpack的配置

  1. 创建webpack.config.js
    const path = require('path')
    module.exports={
    
      entry:'./src/main.js',    //入口
      output:{
        path: path.resolve(__dirname,'dist'), //动态获取绝对路径
        filename: 'bundle.js'
      },   //出口
      mode: 'development',//'production' 模式
    }
    
  2. 输入命令,得到package.json文件
    scripts的脚本在执行时,查找命令的顺序为:
    先找本地的node_modules/.bin路径中对应的命令
    如果没找到,会去全局的环境变量中寻找
    npm init
    
    这里边的scripts命令名:指令,之后用到npm run build
    devDependencies开发时依赖
    dependencies生产环境依赖
    {
      "name": "meetwebpack",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "build": "webpack"
      },
      "author": "",
      "license": "ISC",
      "devDependencies": {
        "webpack": "^3.6.0"
      },
      "dependencies": {
        "webpack": "^3.6.0"
      }
    }
    
    在终端或者cmd都是全局环境打包
    局部环境:在终端输入 ./node_modules/webpack执行
  3. npm install webpack@3.6.0 --save-dev
    --save-dev 是开发时依赖,项目打包不需再使用

5. loader的使用

我们需要加载css、图片,也包括一些高级的将ES6转换成ES5代码,将TypeScript转换成ES5代码,将scssless转成css,将.jsx.vue文件转成.js文件等等
在这里插入图片描述

5.1 css文件的处理

  1. 通过npm安装需要使用的loader
    两个建议一起使用注意版本兼容
    npm install --save-dev css-loader@3.4.2
    npm install --save-dev style-loader@1.1.3
    
  2. webpack.config.js中的modules关键字下进行配置
    入门文件依赖一下
    //依赖css文件
    require('./css/normal.css')
    
    const path = require('path')
    module.exports = {
      entry: './src/main.js',    //入口
      output: {
        path: path.resolve(__dirname, 'dist'), //动态获取路径
        filename: 'bundle.js'
      },   //出口
      module: {
        rules: [
          {
            test: /\.css$/i,
            //位置不能更改,底层是从右向左读取
            //css-loader只负责将css文件进行加载
            //style-loader负责将样式添加到DOM中
            use: ["style-loader", "css-loader"],
          },
        ],
      }
    }
    

5.2 less文件的处理

  1. 通过npm安装需要使用的loader
    两个建议一起使用注意版本兼容
    npm install --save-dev less-loader@5.0.0
    npm install --save-dev less@3.11.1
    
  2. webpack.config.js中的modules关键字下进行配置
    入门文件依赖一下
    //依赖less文件
    require('./css/special.less')
    
    const path = require('path')
    module.exports = {
      entry: './src/main.js',    //入口
      output: {
        path: path.resolve(__dirname, 'dist'), //动态获取路径
        filename: 'bundle.js'
      },   //出口
      module: {
        rules: [
          {
            test: /\.css$/i,
            use: ["style-loader", "css-loader"],
          },
          {
            test: /\.less$/i,
            loader: [
              // compiles Less to CSS
              'style-loader',
              'css-loader',
              'less-loader',
            ],
          },
        ],
      },
    }
    

5.3 图片文件的处理

  1. 通过npm安装需要使用的loader
    两个建议一起使用注意版本兼容

    npm install --save-dev file-loader@5.0.2
    npm install --save-dev url-loader@3.0.0
    
  2. webpack.config.js中的modules关键字下进行配置
    入门文件依赖一下

    body {
        /*background-color: red;*/
        background: url("../img/1.jpg");
    }
    

    publicPath:'dist/'防止找不到,index.html与不在dict文件夹时
    在这里插入图片描述

    name: 'img/[name].[hash:8].[ext]'
    img:文件要打包的文件夹
    name:获取原来的图片名,放在该位置
    hash:8:添加hash,保留8位
    ext: 使用图片原来的扩展名
    limit: 8192 限制大小8kb

    const path = require('path')
    module.exports = {
    
      entry: './src/main.js',    //入口
      output: {
        path: path.resolve(__dirname, 'dist'), //动态获取路径
        filename: 'bundle.js',
        publicPath:'dist/'
      },   //出口
      module: {
        rules: [
          {
            test: /\.(png|jpg|gif|jpeg)$/,
            use: [
              {
                loader: 'url-loader',
                options: {
                  //当加载的图片,小于limit时,会将图片编译成base64字符串格式  单位 byte  8kb
                  //当加载的图片,大于limit时,需要使用file-loader模块进行加载
                  name: 'img/[name].[hash:8].[ext]'
                  limit: 8192
                  // limit: 30000
                }
              }
            ]
          },
        ],
      },
    }
    

5.4. ES6转ES5的babel

  1. 安装
    npm install --save-dev babel-loader@8.0.6  @babel/core @babel/preset-env
    
  2. webpack.config.js中的modules关键字下进行配置
    入门文件依赖一下
    //依赖less文件
    require('./css/special.less')
    
    const path = require('path')
    module.exports = {
      entry: './src/main.js',    //入口
      output: {
        path: path.resolve(__dirname, 'dist'), //动态获取路径
        filename: 'bundle.js'
      },   //出口
      module: {
        rules: [
          {
            test: /\.css$/i,
            use: ["style-loader", "css-loader"],
          },
          {
            test: /\.js$/,
            // exclude:排除
            // include:包含
            exclude: /(node_modules|bower_components)/,
            use: {
              loader: 'babel-loader',
              options: {
                presets: ['@babel/preset-env'] 
              }
            }
          },
        ],
      },
    }
    

6. webpack中配置Vue

未抽离app.vue

  1. 引入vue.js

    npm install vue --save
    
  2. 写一些代码

    import Vue from 'vue';
    new Vue({
      el: '#app',
      data:{
        message:'Hello Webpack!'
      }
    })
    
    <div id="app">
      <h2>{{message}}</h2>
    </div>
    
  3. 配置webpack.config.js
    runtime-only->代码中,不可以有任何的template
    runtime-compiler->代码中,可以有compiler可以用于编译template
    配置resolve,指定内容
    extensions:忽略文件扩展名可以直接引用名字app.js -> import app

    module.exports = {
      entry: './src/main.js',    //入口
      output: {
        path: path.resolve(__dirname, 'dist'), //动态获取路径
        filename: 'bundle.js',
        publicPath:'dist/'
      },   //出口
      resolve:{
       	extensions:['.js','.css','.vue'],
        //别名
        alias:{
          'vue$': 'vue/dist/vue.esm.js'
        }
      }
    }
    

抽离为app.vue

  1. 安装注意版本号^13.0.0
    npm install --save-dev vue-loader vue-template-compiler
    
  2. 配置
    const path = require('path')
    module.exports = {
      entry: './src/main.js',    //入口
      output: {
        path: path.resolve(__dirname, 'dist'), //动态获取路径
        filename: 'bundle.js'
      },   //出口
      module: {
        rules: [
          {
            test: /\.vue$/,
            use:['vue-loader']
          },
        ],
      },
    }
    

在这里插入图片描述

7. plugin的使用

loader转换器 ,plugin 扩展器
plugin 使用过程

  1. 通过npm安装需要使用的plugin
  2. webpack.config.js中的plugin中配置插件

7.1 添加版权的Plugin

插件名BannerPlugin,属于webpack自带的插件

const path = require('path')
var webpack = require('webpack');
module.exports = {
  entry: '', 
  output: {},  
  module: {},
  resolve:{},
  plugins:[
    new webpack.BannerPlugin('最终解释权规slience_me所有!')
  ],
}

在这里插入图片描述

7.2 打包html的Plugin

作用:

  1. 自动生成一个index.html文件
  2. 将打包的js文件,自动通过script标签插入到body

安装插件版本3.2.0

npm install html-webpack-plugin --save-dev

使用插件,修改webpack.config.js文件中的plugins部分的内容如下:

  1. 这里的template表示根据什么模板来生成index.html

  2. 另外,我们要删除之前在output中添加的publicPath属性

  3. 否则插入的script标签中的src可能出问题

    const HtmlWebpackPlugin = require('html-webpack-plugin');
    plugins:[
        new HtmlWebpackPlugin({
          template:'index.html'
        })
      ],
    

7.3 js压缩的Plugin

安装插件版本^1.0.0

npm install uglifyjs-webpack-plugin --save-dev
const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin');
plugins:[
    new UglifyjsWebpackPlugin()
  ]

8. 搭建本地服务器

搭建服务器

安装

npm install --save-dev webpack-dev-server@3.10.3

devserver也是作为webpack中的一个选项,选项本身可以设置如下属性

  • contentBase:为哪一个文件夹提供本地服务,默认是根文件夹,这里写./dist
  • port:端口号
  • inline:页面实时刷新
  • historyApiFallback:在SPA页面中,依赖HTML5的history模式
devServer:{
	contentBase: './dist',
	inline: true
},
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "dev": "webpack-dev-server"
  },

配置文件分离

安装

npm install webpack-merge --save-dev 

dev.config.js

const webpackMerge = require('webpack-merge');
const baseConfig = require('./base.config')
module.exports = webpackMerge.merge(baseConfig,{
  mode:'development',
  devServer:{
    contentBase: './dist',
    inline: true
  }
})

prod.config.js

const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin');
const webpackMerge = require('webpack-merge');
const baseConfig = require('./base.config')
module.exports = webpackMerge.merge(baseConfig,{
  mode:'production',
  plugins:[
    new UglifyjsWebpackPlugin()
  ]
})

base.config.js

const path = require('path')
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  entry: './src/main.js',    //入口
  output: {
    path: path.resolve(__dirname, '../dist'), //动态获取路径
    filename: 'bundle.js',
    // publicPath:'dist/'
  },   //出口
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.less$/i,
        loader: [
          // compiles Less to CSS
          'style-loader',
          'css-loader',
          'less-loader',
        ],
      },
      {
        test: /\.(png|jpg|gif|jpeg)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              //当加载的图片,小于limit时,会将图片编译成base64字符串格式  单位 byte
              //当加载的图片,大于limit时,需要使用file-loader模块进行加载
              limit: 8192,
              name: 'img/[name].[hash:8].[ext]'
              // limit: 30000
            }
          }
        ]
      },
      {
        test: /\.js$/,
        // exclude:排除
        // include:包含
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
      {
        test: /\.vue$/,
        use:['vue-loader']
      }
    ],
  },
  resolve:{
    extensions:['.js','.css','.vue'],
    //别名
    alias:{
      'vue$': 'vue/dist/vue.esm.js'
    }
  },
  plugins:[
    new webpack.BannerPlugin('最终解释权规slience_me所有!'),
    new HtmlWebpackPlugin({
      template:'index.html'
    })
  ]
}

package.json

"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config build/prod.config.js",
"dev": "webpack-dev-server --open --config ./build/dev.config.js"
},

标签:记录,webpack,笔记,loader,Webpack,dev,path,js,css
来源: https://www.cnblogs.com/Slience-me/p/15077931.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有