关于vue方面webpack学习记录

webpack 安装

npm install webpack —save-dev(开发环境)

webpack 配置文件webpack.config.js

module.exports = {
  entry: './src/main.js',//入口文件
  output: {//输出文件
    // path:绝对路径,
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    // publicPath:'dist/'  //设置静态文件打包位置
  },
}

webpack中使用css文件配置

安装css-loader（参考官方文档）

https://www.notion.so/webpack-df2dda6228d04d05855cb942f61b2d37#7567961e208a4342bcb6316ff093fc79

*css-loader需要依赖style-loader

module.exports = {
  module: {
    rules: [
      {
        test: /\\.css$/,
        use: [ 'style-loader', 'css-loader' ]//此位置读取方式从右向左，故先css后style
      }
    ]
  }
}

webpack ES6转ES5

使用babel：

//安装语句
npm install --save-dev babel-loader@7 babel-core babel-preset-es2015

//配置语句
module: {
  rules: [
    {
      test: /\\.js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
        }
      }
    }
  ]
}

webpack 配置vue

//引入vue
npm install vue --save

//配置vue-loader
npm install vue-loader vue-template-compiler --save-dev

// webpack.config.js配置
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  module: {
    rules: [
      // ... 其它规则
      {
        test: /\\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  plugins: [
    // 请确保引入这个插件！
    new VueLoaderPlugin()
  ]
}

webpack plugin(插件)

//1、横幅插件 BannerPlugin
//webpack.config.js
const webpack = require('webpack');
module.exports = {
	plugins: [
	    new webpack.BannerPlugin('最终版权归XXX所有'), //添加版权注释
	}
}

//2.HtmlWebpackPlugin
//安装
npm install html-webpack-plugin --save-dev
//webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
	plugins: [
		new HtmlWebpackPlugin({
		      template: 'index.html'
		    }),//打包html的plugin
	}
}

//3.压缩js的插件uglifyjs-webpack-plugin
//安装
npm install uglifyjs-webpack-plugin@1.1.1 --save-dev
//webpack.config.js
const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin')
module.exports = {
	plugins: [
		new UglifyjsWebpackPlugin() //压缩js（和版权注释不同时使用）
	}
}