webpack配置流程
2020-09-11

webpack配置-vue

  1. npm install webpack -g //将类型文件合并为一个文件，运行时加载到根目录下，根目录下看不到此文件，是因为文件加载到了内存中，速度快，节省浏览器请求

  2. 选择根目录英文

  3. 创建src，index.html，main.js入口文件

  4. npm init初始化，自动生成package.json文件

    w

  5. npm install webpack -d

    1. 根目录创建webpack-config.js配置
      1. var path =require(‘path’)//引入需要的模块或插件
      2. module.exports = {

    ​ //将js合并为一个js文件,webpack默认只有js

    • ​ entry:path.join(_dirname,’./src/main.js’)//输入入口文件

    • ​ output:{//js输出

      ​ path:path.join(_dirname,’./dist’)输出路径

      ​ filename:bundle.js文件名

      ​ },

    • ​ plugins:[],

    • ​ module:{rules:[{},{}..]},

      - ​     resolve:{}

      }

    1. plugins配置所有插件节点

      1. 先安装插件，npm i html-webpack-plugin插件//内存中，根据指导的模板页面，生成一份内存中的首页，同时自动把打包好的bundle.js加入到index.html底部，无需再html内引入bundle.js

      2. var htmlwebpackplugin =require(‘ html-webpack-plugin’)//头部引入

      3. plugins:[

        new htmlwebpackplugin({

     ​               template:path.join(_dirname,'./src/index.html'),

     ​                   filename:'index.html'

        })

     ]
  1. module////配置所有第三方匹配规则，合并其他文件，css、less、sass、url图片font字体等

    1.先安装对应loader包，npm i css-loader style-loader less-loader

    1. babel配置（解析高级JS语法ES6）

      1. npm i babel-core babel-loader babel-plugin-transform-runtime -d

      2. npm i babel-preset-env babel-preset-stage-0 -d

      3. 根目录新建文件babel的配置文件.babelrc 属于json格式

        –配置：{

        ​ “presets”:[“env”,”stage-0”],
        ​ “plugins”:[“transform-runtime”,
        ​ //设置添加babel的插件
        ​ [“component”,[
        ​ { “libraryName”:”mint-ui”, “style”:true }
        ​ ]
        ​ ]
        ​ ]
        ​ }

        3.module:{
        ​ rules:[//匹配模块的匹配规则

    • ​ {test:/\.less$/,use:[‘style-loader’,’css-loader’,’less-loader’]}
      ​ //所有.less文件，使用后面的loder依次合并

      • ​ {test:/\.(jpg|png|jif|jpeg)$/,use:’url-loader?limit=7631&name=[hash:8]- [name].[ext]’}
        ​ //处理图片资源，?后面是传参和url方式完全一样
        ​ //参数1，limit是图片的字节大小，引用的图片小于给定的值，会被转为base64的字符串，浏览器f12图片名字
        ​ //参数2，name使用图片本来的名字，为了预防名字相同（相同时，webpack后面的图片覆盖前面的图片，导致图片渲染重复错误），在name前面添加hash：8值，每个文件的hash（最长32位）值都不同，保证图片唯一性，渲染时即便是名字相同，图片渲染内容也不会覆盖

    • ​ {test:/\.js$/,use:’babel-loader’,exclude:/node_modules}

      //// 配置 Babel 来转换高级的ES语法,exclude排除不需要的js文件

    • { test: /.vue$/, use: ‘vue-loader’ }

      // 处理 .vue 文件的 loader

      ]}

  1. npm webpack-dev-server配置（npm run dev就可以运行）

    package.json中scripts中添加快捷执行

    • “dev”:”webpack-dev-server –open –port 3000 –contentBase src –hot”

    • open浏览器打开

    • port请求3000端口 contentBase链接 根目录src 热更新hot

  1. Vue项目，npm install -global vue-cli

      reStructuredText
              初始化项目，vue init webpack 项目名字

j

PREV
2020-09-11