webpack的配置

setUser
360 阅读3分钟

1、打包 将入口文件打包到dist文件

webpack ./src/main.js ./dist/app.js （main是入口文件 ， app是打包后的文件）

2、配置包文件webpack.config.js

内容：

const path = require("path");
module.exports = {
  /* 暴露两个属性 一：入口文件地址 二：出口文件地址  */
  entry : "./src/main.js",
  output: {
    path:path.resolve(__dirname,"dist"), //打包文件的路径
    filename:"app.js" // 文件名
  }
}

后面直接在控制台输入webpack就可以进行打包

映射到npm 在packge.json的script脚本配置 "build" : "webpack"; 可以直接使用 npm run build进行打包

以下loader和plugins都是基于webpack2.0版本进行适配

处理css

安装loder

css loader  |  npm i css-loader --save
style-loader | npm i style-loader --save

需要在webpack.config.js进行配置

在入口文件进行css引用 才能进行打包 (webpack只是对入口文件打包 ，对有依赖的文件 所以css必须在主文件进行依赖)

在入口文件中引入css进行依赖
require(‘./../css/style.css’)

处理less 安装loader lessloader | npm install --save-dev less-loader less (同时安装了less打包和less转化css包) 在入口文件进行less引用 require(‘./../css/style.less’)

处理图片，json等资源

安装loader

npm install --save-dev url-loader
npm install --save-dev file-loader

  • 当图片大于limit时使用这个loader 图片会被重新命名

  • 当加载的图片小于limit时会将图片编译成base64格式的图片上传到指定位置

  • 当加载图片大于limit时 会使用file-loader

  • （npm i --save-dev file-loader 安装）

在output内添加publicPath：“dist”属性 此属性是为了在加载图片时在路径前面自动添加dist路径

name属性：在打包后的文件夹下生成文件夹以及配置文件名

name : "img/[name].[hash:8].[ext]"
module.exports = {
  /* 暴露两个属性 一：入口文件地址 二：出口文件地址  */
entry : "./src/main.js",
output: {
path:path.resolve(__dirname,"dist"), //打包文件的路径
filename:"app.js",// 文件名
publicPath : "dist/" //此属性是为了在加载图片时在路径前面自动添加dist路径
},
module : {
    rules:[
      //打包编译css
        {
            test:/\.css$/,
            //css-loader只负责css文件进行加载
            //style-loader负责将样式添加到DOM中
            //使用多个loader时,是从右向左
            use:['style-loader','css-loader']
        },
        //打包编译less
        {
            test:/\.less$/,
            use:[{
                loader : "style-loader"  //less打包后需要css打包，然后将style转化到DOM上
            },{
                loader : "css-loader"
            },{
                loader : "less-loader"
            }]
        },
        //图片文件打包
        {
            test:/\.(png|jpg|gif|jpeg)$/, //匹配图片后缀
            use:[//要使用的loader
                loader : "url-loader", 
                options : {
                    //当加载的图片小于limit时会将图片编译成base64格式的图片上传到指定位置
                    //当加载图片大于limit时 会使用file-loader 
                    //（npm i --save-dev file-loader 安装）
                    limit : 13000，
                    //name属性 将在打包后的文件夹下对文件夹，图片名进行控制
                    //img/表示在打包后的目录下创建文件夹
                    //[name]文件名
                    //.[hash:8] 哈希值保留8位 （防止图片名相同）
                    //.[ext] 图片后缀
                    name : "img/[name].[hash:8].[ext]"
                }
            ]
        }
    ]
}
}

ES6转ES5 babel

安装loader

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

配置VUE

npm i vue --save

在webpack对vue配置 使用另一个版本
/* 配置vue */
 module : {...},
  resolve:{
    alias:{ //别名 使用vue的另一个版本
      "vue$" : "vue/dist/vue.esm.js"
    }
  }

使用
/* 引入vue */
import Vue from "vue";
const app = new Vue({
  el:"#app",
  data:{
    mess : "hellow"
  }
})

下面都是配置plugin相关依赖 对代码进行优化 配置html打包依赖

安装

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

js代码丑化压缩

安装

npm install uglifyjs-webpack-plugin@1.1.1 --save-dev  1.1.1版本 

在webpack.config.js文件内
// 引入webpack 声明版权
const webpack = require("webpack");
// 引入html打包模块
const HtmlWebpackPlugin = require("html-webpack-plugin");
// 配置版权信息
  plugins : [
    new webpack.BannerPlugin("最终版权归xjc所有"),
    new HtmlWebpackPlugin({
      template : "index.html"  //打包index.html入口文件
    }),
    new UglifigjsWebpackPlugin() //压缩js代码
  ]
  //注意：配置了html文件后不需要修改url路径配置
  // publicPath : "./dist/" 将index.html文件配置后不需要添加

配置本地服务器 自动刷新

安装

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

在webpack.config.js文件内
devServer : {
    contentBase : "./dist", //为哪个文件提供服务
    inline : true, //页面实时刷新
    historyApiFallback:, //在SPA页面中依赖HTML5的history模式
    port : 8080， //端口号
}

使用注意：不能使用webpack-dev-server
需要在package.json内配置
"dev":"webpack-dev-server --open"  //--open自动打开浏览器

npm run dev 自动运行
所有文件修改好后使用
npm run build 打包

**webpack配置抽离 ** 将开发时和生产时所用的依赖分别抽离

1、将配置文件分离成base.config.js & prod.config.js & dev.config.js三个文件

                        分别表示 基础依赖 & 生产依赖 & 开发依赖

2、合并依赖安装 npm install webpack-merge --save-dev

使用：以生产依赖中为例

引入

const webpackMerge = require("webpack-merge");
const baseConfig = require("./base.config.js"); //指定基础依赖路径
导出 将基础依赖于生产依赖合并
module.exports = webpackMerge(baseConfig , {
    plugins : [
        new UglifyjsWebpackPlugin();
    ]
})

3、注意：在使用npm进行执行打包或者启动自动刷新时需要指定webpackd的自定义路径 在package.json文件下

"build": "webpack --config ./build/pord.config.js",
"dev": "webpack-dev-server --open --config ./build/dev.config.js"
avatar
文章
阅读
粉丝