webpack的基本使用

JoyZ
293 阅读4分钟

npm安装包的说明

  1. 全局安装npm install -g 包名
  2. 本地安装npm install 包名（简写：npm i 包名，默认 加--save）表示本次安装的依赖包会保存到dependencies
  3. 本地开发安装npm install 包名 --save-dev（简写：npm i 包名 -D）
  4. 本地安装一个包，这个包只在开发阶段生效，项目上线就不生效。存在devDependencies中

scripts：用于配置命令的别名

"scripts": {
  // cc别名
  "cc": "npm i jquery"
},
然后npm run cc就行
yarn run cc也行

yarn 和 npm 的比较

功能yarnnpm
初始化yarn init -ynpm init -y
下载yarn add xxx / yarn add xxx@版本npm i xxx/ npm i xxx@版本
删除yarn remove xxxnpm uninstall xxx
下载依赖项yarnnpm install
全局安装yarn global add xxxnpm i -g xxx

webpack的使用步骤

  1. 初始化一个项目 yarn init -y
  2. 安装webpack的依赖项 yarn add webpack webpack-cli -D
  3. 使用webpack对main.js某个文件打包(建立src文件夹，在里面建立mian.js)
  4. 配置一个别名 npm scripts
    1. webpack对 src/main.js进行打包
    2. 最终打包出来的问题: dist/bundle.js
    3. "build": "webpack src/main.js -o dist/bundle.js"
    4. "build": "webpack src/main.js -o dist/bundle.js --mode development"
    5. 不要写的话就是默认压缩版本，写了就不是压缩mode: 'development'
    6. 在打包的时候，需要指定打包的模式 mode production: 生产模块 打的包会自动压缩 development: 开发模式，代码不会压缩
  5. 运行命令： npm run build yarn build "build": "webpack src/main.js -o dist/bundle.js --mode development"
  6. 在项目根目录建立webpack.config.js

webpack的配置文件

在package.json文件中, 可以配置 scripts ... 配置自己的命令(脚本)

"scripts": {
    "aa": "yarn add jquery",
    "build": "webpack --config webpack.config.js"
}
  1. webpack.coinfig.js: 这就是webpack的配置文件（scripts里面的配置"build": " --config webpack.config.js"）
  2. webpack会自动在根目录查找 webpack.config.js我们可以把webpack所有的配置写到配置文件里面
// webpack是运行在node环境中的，webpack的配置文件可以使用nodejs的语法
// 导出的这个对象就是webpack的配置对象
const path = require('path')
module.exports = {
  // 指定对谁打包，入口
  entry: path.join(__dirname, 'src', 'main.js'),
  // 出口 ，指定打包到哪儿去
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  // 打包模式
  mode: 'development'
}
  1. 我要在在根目录下建立一个index.html引入main.js，每次打包后还要引入bundle.js，能不能把index.html一起打包到dist中？
  2. html-webpack-plugin:是webpack的一个插件
    1. 作用：自动帮我们生成一个html文件到dist目录，自动把打完的bundle.js文件给引入
    2. 安装依赖包 yarn add html-webpack-plugin -D
    3. 使用这个插件 在webpack.config.js
 3.1 在webpack.config.js中引入这个插件const HtmlWebpackPlugin = require('html-webpack-plugin')
 3.2 然后在config中
  plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
 笔记可能不更新，官网在更新看官网
  1. 每次改一下代码都要打包很麻烦所以用到webpack-dev-serve
  2. webpack-dev-serve
webpack-dev-server: 在开发阶段可以帮我们自动开启一个服务器，而且，会自动监听文件的变化，如果文件变化了，会自动刷新浏览器，
使用：
    1. 安装webpack-dev-server  yarn add webpack-dev-server -D
    2. 在webpack.config.js中配置一个scripts  "serve": "webpack-dev-server --open"
    3. 启动  yarn serve

    webpack-dev-server: 在开发阶段帮我们启动服务器，监听文件变化，刷新浏览器
    webpack: 在项目上线之前，需要进行打包
  1. 引入插件
在项目中难免会引入插件
比如引入moment
1、安装插件： yarn add moment
2、引用插件： main.js import moment from 'moment'

8、loader

css-loader
在项目中难免会用到css文件，直接打包的话会出错
1、安装css-loader yarn add css-loader style-loader -D
2、在rules配置
module:{
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  }

less-loader
1、 安装 yarn add less-loader less -D
2、 在rules配置
  {
    test: /\.less$/,
    use: ['style-loader', 'css-loader', 'less-loader']
  }
  
url-loader（处理图片和字体图标）
1、安装 yarn add file-loader url-loader -D
2、在rules配置（图片）
    url-loader会把图片打包成base编码，打包到bundle.js中
    任何一张图片，都可以使用base来表示， base64图片的字符串的表示
    一个图片如果使用base64来表示 大小会增加将近30%
    用file-loader的理由：url-loader会导致图片变大30%
    用url-loader的理由：减少请求次数  
    需要给url-loader设置一个范围，如果超出范围，会调用file-laoder来触发
  {
    test: /\.(png|jpg|gif)$/,
    use: [
      {
        loader: 'url-loader',
        options: {
          // 如果图片的大小低于limit，会使用url-loader
          // 如果超出limit，使用file-loader处理
          limit: 8 * 1024
        }
      }
    ]
  }
  3、字体图标
  {
    test: /\.(eot|svg|ttf|woff)$/,
    use: [
      {
        loader: 'url-loader',
        options: {
          // 如果图片的大小低于limit，会使用url-loader
          // 如果超出limit，使用file-loader处理  10000
          limit: 8 * 1024
        }
      }
    ]
  }
  
  babel-loader
  babel可以把任意的新版本的ES语法
      ES6-ES9新语法  ------》 ES3/5的语法（所有的浏览器都兼容）
      
  1. 安装依赖包： 
    yarn add -D babel-loader @babel/core @babel/preset-env
  2. 配置
    {
      test: /\.m?js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
        }
      }
    }

src下的目录如何用@配置

src下的目录如何用@配置

如何关闭eslint

如何关闭eslint

如何默认打开项目

在根目录新建vue.config.js

// vite 是不行的 
module.exports = { 
    publicPath: './', // 打包好后的文件可以点击index.html看效果 
    devServer: { 
        port: 3000, // 端口号变成3000 
        open: true // 默认打开网页 
    }
}

或者在package.json文件

"script": { "serve": "vue-cli-service serve --open" }

1、import 引入文件的时候.vue .js可以省略不计
avatar
文章
阅读
粉丝