webpack打包相关配置

这里写目录标题

    • js打包
    • loader
      • css打包
      • less打包
      • img打包
      • ES6转化为ES5打包
      • 支持vue
      • vue组件化开发配置
      • 关于省略文件后缀名
    • plugin
      • 添加版权信息
      • 打包html的插件
      • js压缩
      • 搭建本地服务器
    • 抽离config设置
      • 最终配置好 的base.config.js
      • 最终配置好的dev.config
      • 最终配置好的prod.config
      • 最终配置好的package.json

js打包

  1. 安装node
  2. 安装webpack—指定版本
npm i webpack@3.6.0 -g
  1. 配置文件中的webpack.config.js
const path= require('path');
module.exports={
  entry:'./src/aaa.js',//入口
  output:{//出口
    path:path.resolve(__dirname,'dist'),//node 方法,可以拼接路径
    filename:'bundle.js'//导出名称
  }
}
  1. 初始化

备注:
下一级目录:cd 下一级目录
上一级目录:…/

npm init
  1. 填写名称(英文),然后会出现一个版本号 然后回车
    生成文件:
{
  "name": "meetwebpack",
  "version": "1.0.0",//版本号
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
     "build": "webpack"
  },
  "author": "",
  "license": "ISC"//开源协议不开源就删除
}
  1. 安装package.json依赖包
npm install
  1. 打包
 webpack或者npm run build

本地依赖包安装

npm install webpack@3.6.0 --save-dev

loader

可参考中文文档https://www.webpackjs.com/loaders/css-loader/

css打包

  1. 入口js文件设置require
require('./css/normal.css')
  1. 安装style-loader css-loader
npm install --save-dev css-loader
npm install style-loader --save-dev
  1. webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader' ]
      }
    ]
  }
}

less打包

  1. 安装
    直接用官网安装会因为版本过高报错
npm install less-loader@4.1.0 --save
  1. webpack.config.js
module.exports = {
    ...
    module: {
        rules: [{
            test: /\.less$/,
            use: [{
                loader: "style-loader" // creates style nodes from JS strings
            }, {
                loader: "css-loader" // translates CSS into CommonJS
            }, {
                loader: "less-loader" // compiles Less to CSS
            }]
        }]
    }
};

img打包

  1. url-loader
npm install --save-dev url-loader
  1. webpack.config.js
    limit:
  • 数值:文件大小*1024
  • 限制文件内的img图片大小 如果大小在限制内会直接加载,并使用base64方式直接加载图片。超过限制大小则需要安装file-loader
npm install --save-dev file-loader

同时需要配置下文件加载路径,在config文件内设置:

publicPath:'dist/'
  • 关于图片的命名规范问题:默认是生成一个32位的哈希值,当然可以进行自定义:
  • 在option内添加name属性即
  • name:‘img/[name].[hash:8].[ext]’
module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192
            }
          }
        ]
      }
    ]
  }
}

ES6转化为ES5打包

  1. loader
npm install --save-dev babel-loader@7 babel-core babel-preset-es2015
  1. config
 module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['ES2015']
        }
      }
    }
  ]
}

支持vue

  1. 应设置运行时依赖
npm install vue --save
  1. js文件引入vue模块
import Vue from 'vue';
  1. 配置config
resolve:{
    //别名
    alias:{
      "vue$":'vue/dist/vue.esm.js'
    }
  }

vue组件化开发配置

  1. 安装loader
npm install vue-loader vue-template-compiler --save-dev
  1. config文件
{
        text: /\.vue$/,
        use:['vue-loader']
      }

依旧会报错 此时应修改json 中的vue-loader 为"^13.0.0",然后重新安装 npm install

关于省略文件后缀名

config文件中配置

resolve:{
    //省略文件后缀名
    extensions:['.js','.css','.vue'],
    //别名
    alias:{
      "vue$":'vue/dist/vue.esm.js'
    }
  }

plugin

添加版权信息

修改config

const webpack =require('webpack')
module.exports={
 ...
  plugins:[
    new webpack.BannerPlugin('最终版权归aa所有')
  ]
}

打包html的插件

  1. 安装
npm install html-webpack-plugin --save-dev
  1. 修改config
const HtmlWebpackPlugin =require('html-webpack-plugin');
plugins:[
    new webpack.BannerPlugin('最终版权归aa所有'),
   new HtmlWebpackPlugin({
      template:'index.html'
    })
  ]

安装完毕可能仍旧报错,此时修改json文件

"html-webpack-plugin": "^3.2.0",

如果这样设置的化path里面的dist路径拼接便不需要了

js压缩

  1. 安装
npm install uglifyjs-webpack-plugin@1.1.1 --save-dev
  1. config文件内设置:
const uglifyJsPlugin=require('uglifyjs-webpack-plugin')
plugins:[
    new webpack.BannerPlugin('最终版权归aa所有'),
    new HtmlWebpackPlugin({
      template:'index.html'
    }),
      new uglifyJsPlugin()
  ]

搭建本地服务器

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

config文件

module.exports={
...
	devServer:{
	    contentBase:'./dist',
	    //页面实时刷新
	    inline: true
	  }
  }

json文件最上面大括号设置运行后自动打开

 "dev": "webpack-dev-server --open"

运行server

npx webpack-dev-server

ctrl+c中止终端
再次打包

抽离config设置

  1. 首先抽离基本配置文件单独建立一个js文件,然后抽离production 以及dev时的config配置,目录在根目录
  2. 安装相应配置
npm install webpack-merge
  1. 需要合并的文件内设置
const webpackMerge=require('webpack-merge');
const baseConfig=require('./base.config');
 //第一个参数为引入的需要合并的文件,第二个参数内容为需要合并的内容
 module.exports=webpackMerge(base.config,
  {plugins:[
    new uglifyJsPlugin()   //打包时需要
  ]}
)
  1. 修改json文件内的
"scripts": {
   "build": "webpack --config ./build/prod.config.js",
    "dev": "webpack-dev-server --open --config ./build/dev.config.js"
  }

修改config文件中的path路径

path: path.resolve(__dirname, '../dist'),//动态获取打包后的文件路径,path.resolve拼接路径

最终配置好 的base.config.js

//1.导入node的path包获取绝对路径,需要使用npm init初始化node包
const path = require('path')
//获取webpack
const webpack = require('webpack')
//获取htmlWebpackPlugin对象
const htmlWbepackPlugin = require('html-webpack-plugin')

//2.配置webpack的入口和出口
module.exports = {
  entry: './src/aaa.js',//入口文件
  output:{
    path: path.resolve(__dirname, '../dist'),//动态获取打包后的文件路径,path.resolve拼接路径
    filename: 'bundle.js',//打包后的文件名
    // publicPath: 'dist/'
  },
  module: {
    rules: [
      {
        test: /\.css$/,//正则表达式匹配css文件
        //css-loader只负责css文件加载,不负责解析,要解析需要使用style-loader
        use: [{
          loader: 'style-loader'
        }, {
          loader: 'css-loader'
        }]//使用loader
      },
      {
        test: /\.less$/,//正则表达式匹配css文件
        //css-loader只负责css文件加载,不负责解析,要解析需要使用style-loader
        use: [{
          loader: 'style-loader'
        }, {
          loader: 'css-loader'
        }, {
          loader: 'less-loader'//less文件loader
        }]//使用loader
      },
      {
        test: /\.(png|jpg|gif)$/,//匹配png/jpg/gif格式图片
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,//图片小于8KB时候将图片转成base64字符串,大于8KB需要使用file-loader
              name: 'img/[name].[hash:8].[ext]'//img表示文件父目录,[name]表示文件名,[hash:8]表示将hash截取8位[ext]表示后缀
            }
          }
        ]
      },
      {
        test: /\.js$/,
        //排除node模块的js和bower的js
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            //如果要使用@babel/preset-env这里需要在根目录新建一个babel的文件
            // presets: ['@babel/preset-env']
            //这里直接使用指定
            presets: ['es2015']
          }
        }
      },
      {
        test: /\.vue$/,//正则匹配.vue文件
        use: {
          loader: 'vue-loader'
        }
      }
    ]
  },
  resolve: {
    // alias:别名
    alias: {
      //指定vue使用vue.esm.js
      'vue$':'vue/dist/vue.esm.js'
    }
  },
  plugins:[
    new webpack.BannerPlugin('最终解释权归zz所有'),
    new htmlWbepackPlugin({
      template: 'index.html'
    })
  ]

}

最终配置好的dev.config

//导入webpack-merge对象
const webpackMerge = require('webpack-merge')
//导入base.config.js
const baseConfig = require('./base.config')

//使用webpackMerge将baseConfig和dev.config的内容合并
module.exports = webpackMerge(baseConfig, {
  devServer: {
    contentBase: './dist',//服务的文件夹
    port: 4000,
    inline: true//是否实时刷新
  }

})

最终配置好的prod.config

const uglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin')
//导入webpack-merge对象
const webpackMerge = require('webpack-merge')
//导入base.config.js
const baseConfig = require('./base.config')

//使用webpackMerge将baseConfig和prod.config的内容合并
module.exports = webpackMerge(baseConfig, {
  plugins:[
    new uglifyjsWebpackPlugin()
  ]
})

最终配置好的package.json

{
  "name": "meetwebpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "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"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.10.4",
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-es2015": "^6.24.1",
    "css-loader": "^3.6.0",
    "file-loader": "^6.0.0",
    "html-webpack-plugin": "^3.2.0",
    "less": "^3.11.3",
    "style-loader": "^1.2.1",
    "uglifyjs-webpack-plugin": "^1.1.1",
    "url-loader": "^4.1.0",
    "vue-loader": "^13.0.0",
    "vue-template-compiler": "^2.6.11",
    "webpack": "^3.12.0",
    "webpack-dev-server": "^2.9.3",
    "webpack-merge": "^4.1.5"
  },
  "dependencies": {
    "babel-preset-env": "^1.7.0",
    "less-loader": "^4.1.0",
    "vue": "^2.6.11"
  }
}

你可能感兴趣的:(webpack)