vue中webpack相关的配置

时间:2020-06-03 09:17:58   收藏:0   阅读:46

webpack

什么是webpack?

webpack安装

# 安装webpack
# @ 后面加版本号
# -g 指的是全局安装
npm install webpack@3.6.0 -g
# 利用webpack将 main.js 打包成 dist文件夹下的bundle.js
# webpack 会帮你处理各个模块间的依赖
webpack ./src/main.js ./dist/bundle.js

我们正常一个vue项目会有 一个src文件和一个dist文件夹

本地安装(局部安装)webpack

# --save-dev  开发时依赖  webpack一旦打包好就不需要了,所以属于开发时的依赖
npm install webpack@3.6.0 --save-dev

package.json 中定义启动

npm run build

Package.json 配置信息

{
  "name": "meetwebpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^3.6.0"
  }
}

什么是loader?

上链接:https://www.webpackjs.com/loaders/

less文件处理-准备工作

ES6语法处理

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

// 或者你可以使用options属性来给loader传递参数
module: {
  rules: [
    {
      test: /\.js$/,
      // exclude 排除 下面文件夹中的文件不需要传唤
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: ‘babel-loader‘,
        options: {
          presets: [‘@babel/preset-env‘],
          plugins: [require(‘@babel/plugin-transform-object-rest-spread‘)]
        }
      }
    }
  ]
}

vue发布的版本问题:

注意:通过 npm install vue —save 直接安装vue 后,在 项目中使用vue ,然后通过webpack打包后运行会报错。

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

(found in <Root>)

解决办法:

上链接:

// package.json
{
  "name": "meetwebpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^3.6.0"
  },
  "dependencies": {
    "vue": "^2.6.11"
  }
}

// wepack.config.js

// 这个文件是配置webpack的入口和出口文件


// node.js 语法获取绝对路径
// 1. 导入path模块,聪node包中找的
const path = require(‘path‘);

module.exports = {
  entry:‘./src/main.js‘,
  output:{
    path:path.resolve(__dirname,‘dist‘),  // 必须是绝对路径,这里是通过node.js 的path 实现的路径的拼接
    filename:‘bundle.js‘  // bundle 打包
  },
  // vue 配置这个可以使用template
  resolve:{
    // alias: 别名
    alias:{
      // 当我们 导入 from vue 的时候,指向执行的路径去找文件  vue.esm.js 中包含 complier
      ‘vue$‘:‘vue/dist/vue.esm.js‘
    }
  }
};

认识plugin(插件)

插件一(版权申明插件)

作用:在bundle.js 中 增加版权信息,即为打包的文件添加版权申明

const path = require(‘path‘)
const webpack = require(‘webpack‘)

module.exports = {
  ....
  plugins:[
    new webpack.BannerPlugin(‘版权相关申明信息‘)
  ]
}

插件二(打包html的plugin)

npm install html-webpack-plugin@3.2.0 --save-dev 
# 注:这里如果在使用的过程中报错,则看 一下 package.json 文件中的版本号,我这里改成3.2.0 就不报错了

配置文件如下:(webpack.config.js)

// 这个文件是配置webpack的入口和出口文件


// node.js 语法获取绝对路径
// 1. 导入path模块,从node包中找的
const path = require(‘path‘);
const webpack = require(‘webpack‘);
const HtmlWebpackPlugin = require(‘html-webpack-plugin‘);

module.exports = {
  entry:‘./src/main.js‘,
  output:{
    path:path.resolve(__dirname,‘dist‘),  // 必须是绝对路径,这里是通过node.js 的path 实现的路径的拼接
    filename:‘bundle.js‘  // bundle 打包
  },
  module:{
    rules:[
      {
        test: /\.css$/,
        // css-loader 只负责将css文件进行加载
        // style-loader 负责将样式添加到dom中进行操作
        // webpack 在使用多个loader的时候,是从右向左读的
        use: [ ‘style-loader‘, ‘css-loader‘ ]
      },
      {
        test:/\.vue$/,
        use:[‘vue-loader‘]
      },
    ]
  },
  resolve:{
    // alias: 别名
    alias:{
    //   // 当我们 导入 from vue 的时候,指向执行的路径去找文件  vue.esm.js 中包含 complier
      // 该配置项可以让js以 不是runtime-complier 发行版运行,此时可以用template
      ‘vue$‘:‘vue/dist/vue.esm.js‘,
    //   // 配置完如下配置可以在导入的时候,可以省略后缀名
    //   extensions:[‘.js‘,‘.vue‘,‘.css‘],
    }
  },
  plugins:[
    new webpack.BannerPlugin(‘最终版权信息归qzk所有‘),
    // ########### 生成html #############
    new HtmlWebpackPlugin(
      {
        // 指定模板
        template: ‘index.html‘,
      }
    ),
  ]
};

插件三(js压缩的Plugin)

npm install uglifyjs-webpack-plugin@1.1.1 --save-dev
const path = require(‘path‘);
const webpack = require(‘webpack‘);
const uglifyJsPlugin = require(‘uglifyjs-webpack-plugin‘);

module.exports = {
  ...
  plugins:[
    new webpack.BannerPlugin(‘版权申明‘),
    new uglifyJsPlugin()
  ]
}

执行重新 npm run build 后 查看打包后就是被重新压缩过

搭建本地服务器

npm install --save-dev webpack-dev-server@2.9.1
{
  "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": "qzk",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^3.5.3",
    "html-webpack-plugin": "^3.2.0",
    "style-loader": "^1.2.1",
    "uglifyjs-webpack-plugin": "^1.1.1",
    "vue-loader": "^13.7.3",
    "vue-template-compiler": "^2.6.11",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.9.1",
    "webpack-merge": "^4.2.2"
  },
  "dependencies": {
    "vue": "^2.6.11"
  }
}

# 相对路径(不是最终的方案)
./node_modules/.bin/webpack-dev-server
// 这个文件是配置webpack的入口和出口文件


// node.js 语法获取绝对路径
// 1. 导入path模块,从node包中找的
const path = require(‘path‘);
const webpack = require(‘webpack‘);
const HtmlWebpackPlugin = require(‘html-webpack-plugin‘);
const uglifyJsPlugin = require(‘uglifyjs-webpack-plugin‘);

module.exports = {
 ...
  devServer:{
    // 这个server服务于哪一个文件夹
    contentBase:‘./dist‘,
    // 实时监听变化,更新
    inline:true,
    // 指定端口
    port:8008
  }
};

最后就可以通过如下命令来执行了

npm run dev

webpack中配置文件的分离

npm install webpack-merge --save-dev

在实际开发与生产中,我们所依赖的配置文件,放在与src同级的build文件夹下一般分为:

base.config.js

// 这个文件是配置webpack的入口和出口文件


// node.js 语法获取绝对路径
// 1. 导入path模块,从node包中找的
const path = require(‘path‘);
const webpack = require(‘webpack‘);
const HtmlWebpackPlugin = require(‘html-webpack-plugin‘);

module.exports = {
  entry:‘./src/main.js‘,
  output:{
    path:path.resolve(__dirname,‘../dist‘),  // 必须是绝对路径,这里是通过node.js 的path 实现的路径的拼接
    filename:‘bundle.js‘  // bundle 打包
  },
  module:{
    rules:[
      {
        test: /\.css$/,
        // css-loader 只负责将css文件进行加载
        // style-loader 负责将样式添加到dom中进行操作
        // webpack 在使用多个loader的时候,是从右向左读的
        use: [ ‘style-loader‘, ‘css-loader‘ ]
      },
      {
        test:/\.vue$/,
        use:[‘vue-loader‘]
      },
    ]
  },
  resolve:{
    // alias: 别名
    alias:{
      //   // 当我们 导入 from vue 的时候,指向执行的路径去找文件  vue.esm.js 中包含 complier
      // 该配置项可以让js以 不是runtime-complier 发行版运行,此时可以用template
      ‘vue$‘:‘vue/dist/vue.esm.js‘,
      //   // 配置完如下配置可以在导入的时候,可以省略后缀名
      //   extensions:[‘.js‘,‘.vue‘,‘.css‘],
    }
  },
  plugins:[
    new webpack.BannerPlugin(‘最终版权信息归qzk所有‘),
    new HtmlWebpackPlugin(
      {
        // 指定模板
        template: ‘index.html‘,
      }
    ),
  ],
  
};

prod.config.js

// node.js 语法获取绝对路径
// 1. 导入path模块,从node包中找的
const uglifyJsPlugin = require(‘uglifyjs-webpack-plugin‘);
const webpackMerge = require(‘webpack-merge‘);
const baseConfig = require(‘./base.config‘);

module.exports = webpackMerge(baseConfig,{
  plugins:[
    new uglifyJsPlugin(),
  ],
});

dev.config.js

const webpackMerge = require(‘webpack-merge‘);
const baseConfig = require(‘./base.config‘);

module.exports = webpackMerge(baseConfig,{

  // 开发时依赖,但是生产时不依赖,所以不能放在base里面
  devServer:{
    // 这个server服务于哪一个文件夹
    contentBase:‘./dist‘,
    // 实时监听变化,更新
    inline:true,
    // 指定端口
    port:8008
  }
});

然后在package.json 中配置 script

{
  "name": "meetwebpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    # 配置生产时的依赖的 webpack.config.js
    "build": "webpack --config ./build/prod.config.js",
    # 配置 开发时的依赖的 webpack.config.js
    "dev": "webpack-dev-server --open --config ./build/dev.config.js"
  },
  "author": "qzk",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^3.5.3",
    "html-webpack-plugin": "^3.2.0",
    "style-loader": "^1.2.1",
    "uglifyjs-webpack-plugin": "^1.1.1",
    "vue-loader": "^13.7.3",
    "vue-template-compiler": "^2.6.11",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.9.1",
    "webpack-merge": "^4.2.2"
  },
  "dependencies": {
    "vue": "^2.6.11"
  }
}

原文:https://www.cnblogs.com/qianzhengkai/p/13034823.html

评论(0
© 2014 bubuko.com 版权所有 - 联系我们:wmxa8@hotmail.com
打开技术之扣,分享程序人生!