【代码管理】webpack配置总结

WEBPACK 模块打包工具总结

可以去webpack中文网查找相应的loader或配置信息

安装

webpack需要node的环境
全局安装webpack

npm install webpack -g
nom install webpack@version -g

局部安装

cd文件夹
npm install webpack --save-dev
nom install webpack@version --save-dev

-dev是开发时依赖，不加是发布时依赖
dist是发布的文件夹，src是开发时的文件夹
开发时需要一个入口文件main.js

配置（webpack.config.js）

打包js文件（js模块当中的依赖需要将依赖写在入口文件里面，webpack可以将这个入口文件以及依赖的js模块打包到出口文件里面）

//配置webpack.config.js文件定义入口出口
//path依赖node包，所以必须有package.json文件可以用npm init
const path = require('path')//path可以处理路径
module.exports = {
    
    
    entry:'main.js',
    output:{
    
    
        path:path.resolve(__dirname,'dist'),//动态获取dist的绝对路径
        filename:'bundle.js'
    },
    <!--publicPath:'dist/'-->
}

除了js，其他的文件都需要安装相应的loader来打包相应的文件

打包css文件(样式相关的都需要装style-loader)
安装

npm install --save-dev style-loader
npm install --save-dev css-loader

module.exports = {
module: {
  rules: [//rules里面放打包各种的规则，以下笔记代码将不会再写rules以外的代码！！
    {
      test: /\.css$/,
      use: [ 'style-loader', 'css-loader' ]
      //use的使用都是从右向左，先打包CSS再由style-loader放在DOM里面
    }
  ]
}
}

打包less文件
安装

npm install --save-dev less-loader less

{
    
    
  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
  }

打包.vue文件
以前的使用都是引入一个js文件，或者CDN现在需要通过npm安装
首先通过npm安装vue

npm install vue--save//开发运行都需要所以不加-dev

在使用的时候,因为vue在编译的时候，有两个方式

runtime-only代码中不可以有任何的tempalte
runtime-compiler代码中可以有template，用于编译template

会报错，因为你使用runtime-only编译有template的代码，vue版本不同，去指定版本
解决方案(配置webpack)

在output同级下加入resolve
resolve:{
    
    
    alias:{
    
    
        'vue$':'vue/dist/vue.esm.js'
    }
}

图片(或者文件)的处理
安装

npm install --save-dev url-loader

安装file-loader

npm install --save-dev file-loader

{
    
    
  test: /\.(png|jpg|gif|jpeg)$/,
  use: [
    {
    
    
      loader: 'url-loader',
      options: {
    
    
        limit: 8192//规定大小字节，低于这个数值将会执行base64编码
        //大于将找文件进行配置就需要安装file-loader
        //大于的情况下会出现路径问题
        //定义图片命名
        name:'img/[name].[hash:8].[ext]'//img文件夹下存放
      }
    }
  ]
  }

es6转es5–配置babel
安装

webpack 3.x | babel-loader 8.x | babel 7.x

npm install babel-loader@8.0.0-beta.0 @babel/core @babel/preset-env webpack

webpack 3.x babel-loader 7.x | babel 6.x

npm install babel-loader babel-core babel-preset-env webpack

单纯ES6转ES5

npm install --save-dev babel-loader@7 babel-core babel-preset-es2015

配置

{
    
    
    test: /\.js$/,
    exclude: /(node_modules|bower_components)/,//排除对这些的转换
    use: {
    
    
      loader: 'babel-loader',
      options: {
    
    
        <!--presets: ['@babel/preset-env']-->
        presets: ['es2015']
      }
    }
  }

根据相关性配置package.json文件

"scripts": {
    
    
      "dev":"webpack-dev-server --open"
      "build": "webpack"
      //优先执行本地路径不会去全局，（如果全局跟本地的webpack不一样的版本，那么如果执行全局的会出错
      //在终端输入webpack xxxx肯定是全局的
  },
  //下面举例cli3.0的配置情况
"devDependencies":{
    
    
     "@vue/cli-plugin-babel": "^3.11.0",
      "@vue/cli-plugin-e2e-cypress": "^3.11.0",
      "@vue/cli-plugin-eslint": "^3.11.0",
      "@vue/cli-plugin-unit-mocha": "^3.11.0",
      "@vue/cli-service": "^3.11.0",
      "@vue/test-utils": "1.0.0-beta.29",
      "babel-eslint": "^10.0.1",
      "chai": "^4.1.2",
      "eslint": "^5.16.0",
      "eslint-plugin-vue": "^5.0.0",
      "lint-staged": "^8.1.5",
      "sass": "^1.18.0",
      "sass-loader": "^7.1.0",
      "vue-template-compiler": "^2.6.10"
}//开发时的依赖版本会出现在这里
"dependencies":{
    
    
    "apidoc": "^0.17.7",
      "body-parser": "^1.19.0",
      "core-js": "^2.6.5",
      "express": "^4.17.1",
      "mongodb": "^3.3.2",
      "mongoose": "^5.7.1",
      "vue": "^2.6.10",
      "vue-router": "^3.0.3",
      "vuex": "^3.0.1"
}//发布运行时的依赖版本会出现在这里

插件plugin
使用过程：
- npm安装使用的插件，有一些插件不需要那幢
- 在webpack.config.js中的plugin配置相应的插件

举例：

版权声明(BannerPlugin)

const webpack = require('webpack')
module.exports = {
      
      
    ...
    plugin:{
      
      
        new webpack.BannerPlugin('xxxxx')
    }
}

打包html(在dist创建对应的html)HtmlWebpackPlugin

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

const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
      
      
    ...
    plugin:{
      
      
        new HtmlWebpackPlugin({
      
      
            tempalte:''//指定模板
        })
    }
}

js压缩(UglifyjsWebpackPlugin)

npm install uglifyjs-webpack-plugin --save-dev

const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin')
module.exports = {
      
      
    ...
    plugin:{
      
      
        new UglifyjsWebpackPlugin()
    }
}

热更新配置本地服务器(webpack-dev-server)

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

const WebpackDevServer = require('webpack-dev-server')
module.exports = {
      
      
    ...
    devServer:{
      
      
        contentBase:'./dist',
        inline:true//是否实时监听
    }
}
<!--package.json:-->
"dev":"webpack-dev-server --open"//可以直接链接服务器以后打开相应网页

【代码管理】webpack配置总结

webpack 3.x | babel-loader 8.x | babel 7.x

webpack 3.x babel-loader 7.x | babel 6.x

单纯ES6转ES5

猜你喜欢