初识webpack笔记

第一个webpack

• 1 npm init -y
• 2 npm i jquery -S
• 3 新建index系列文件
• 4 npm install webpack-cli D
• 5 新建 webpack.config.js
  • module.exports={mode:'development'}

配置webpack.config.js 入口和出口

const path = require('path');
    module.exports = {
        mode:'development',//打包的模式
        entry:path.join(__dirname,'./src/index.js'),//入口
        output:{
            //出口
            path:path.join(__dirname,'./dist'),
            filename:'bundle.js'
        }
    }

自动打包 webpack-dev-server 是一个小型的express服务器

• 优点:1>为静态文件提供服务2>自动刷新和热替换(HMR)
• bundle.js 会自动生成并存储在内存中 - 内存访问速度比硬盘/磁盘快
• npm i webpack-dev-server -D

      //修改package.json 增添如下代码
      "script": {
          "dev": "webpack-dev-server"
      }
  

html-webpack-plugin 生成预览页面

• 将html抽离成模块文件并存储在内存中 且默认访问index
• npm i html-webpack-plugin -D

      //引入预览页面插件依赖
      const HtmlWebpackPlugin = require('html-webpack-plugin')
      //创建插件的实例对象
      const htmlPlugin = new HtmlWebpackPlugin({
          template: './src/index/html' //指定用哪个模块文件
          filename: 'index.html' //指定生成的文件名称,存于内存中
      })
  
      module.exports = {
          //plugins是webpack打包期间会用到的插件列表
          plugins: [htmlPlugin],
      }
  

打包参数

• package.json中 可选参数 host->IP地址 port->端口

      //修改package.json
      "scripts": {
          "dev": "webpack-dev-server -open -host 127.0.0.1 -port 6666"
      }
  

webpack 加载器

• webpack默认只能打包.js的模块 其他模块需调用loader才可正常打包

webpack css加载器

• index.js中 导入需要加载的文件 import 'css file path'
• npm i style-loader css-loader -D

      //webpack.config.js新增语句
      module.exports = {
          module:{
              rules: [
                  {
                      test: /\.css$/, 
                      use: ['style-loader', 'css-loader']
                  }
              ]
          },
      }
  

webpack less加载器

• index.js + import 'less file path'
• npm i less-loader less -D

      module: {
          rules: [
              {
                  test: /\.less/,
                  use: ['style-loader', 'css-loader', 'less-loader']
              }
          ]
      }
  

webpack scss加载器

• index.js + import 'scss file path'
• npm i sass-loader node-sass -D

      module: {
          rules: [
              {
                  test: /\.scss$/,
                  use: ['style-loader', 'css-loader','sass-loader']
              }
          ]
      }
  

webpack postcss

• npm i postcss-loader autoprefixer -D
• 新建 postcss.config.js
  const autoprefixer = require('autoprefixer)
module.exports = {plugins: [autoprefixer]}

      module: {
          rules: [
              {
                  test: /\.css$/,
                  use: [
                      'style-loader',
                      'css-loader',
                      'postcss-loader'
                  ]
              }
          ]
      }
  

webpack 样式表图片文字

• npm i url-loader file-loader -D
• 当图片较小时,把图片转换成base64 不需要请求资源 提高性能 通过limit限制图片大小(字节)

      //将 format 字段替换成 jpg|png|gif|bmp|ttf|eot|svg|woffwoff2
      module:{
          rules:[
              {
                  test: /\.format$/,
                  use: 'url-loader?limit=16940'
              }
          ]
      }
  

webpack 处理js高级

• npm i babel-loader @babel/core @babel/runtime @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D
• 新建 babel.config.js

      module.exports = {
          presets: ['@babel/preset-env'],
          plugins: [
              'htmlPlugin',
              '@babel/plugin-transform-runtime',
              '@babel/plugin-proposal-class-properties'
          ],
          module:{
              rules: [
                  test: /\.js$/,
                  use: 'babel-loader',
                  exclude: /node_modules/
              ]
          }
      }
  

package.json

• 默认执行webpack命令的时候,他会去src目录中找一个index.js进行打包,并把打包好的代码输出到dist中的main.js中

    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "dev": "webpack-dev-server --open --port 8888"
    }    

配置npm 淘宝

- npm config set registry https://registry.npm.taobao.org

- npm config set sass_binary_site=https://npm.taobao.org/mirrors/node-sass/

- npm config set phantomjs_cdnurl=https://npm.taobao.org/mirrors/phantomjs/

- npm config set electron_mirror=https://npm.taobao.org/mirrors/electron/

- npm install sass-loader node-sass --save-dev