webpack

//webpack必须采用commonjs写法
let path = require('path');  //专门处理路径用的
console.log(path.resolve('./dist'));//根据当前路径解析出一个绝对路径[E:\GIT\webpack\dist]
let HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    //把main+a打包到bundle中，再把bundle放到dist文件夹里
    entry:'./src/main1.js',  //打包的入口文件，webpack会自动查找相关的依赖进行打包
    output:{
        filename:'build.js',  //打包后的名字，自定义bundle.js
        path:path.resolve('./dist')  //必须是一个绝对路径
    },
    //模块的解析规则
    //-js 匹配所有的js，用babel-loader转译，排除掉node_modules
    module:{
        rules:[
            {test:/\.js$/,use:'babel-loader',exclude:/node_modules/},
            //匹配.js                        排除node_modules
            {test:/\.css$/,use:['style-loader','css-loader']},  //顺序从右往左写
            {test:/\.less$/,use:['style-loader','css-loader','less-loader']},  //顺序从右往左写
            {test:/\.(jpg|png|gif|jpeg)$/i,use:'url-loader?limit=8192'},  //转化base64只在8192字节以下转化，其他情况输出图片
            {test:/\.(eot|svg|woff|woff2|wtf)$/,use:'url-loader'}
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({  //自动插入到dist目录中
            template:'./src/index.html',  //使用的模板
            //filename:'login.html'  //产出的名字
        })
    ]
};

 

//给打包文档使用
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
const {VueLoaderPlugin} = require('vue-loader');
module.exports = {
  mode:'development',
  devtool:'source-map',
  entry:path.resolve(__dirname,'main.ts'),
  output:{
    path:path.resolve(__dirname,'../website-dist'),
    filename:'bundle.js'
  },
  resolve:{ //解析模块，对应的扩展名有哪些
    extensions:['.ts','.tsx','.js','.vue']
  },
  module:{// loader 三种写法  { }  ""  []
    rules:[
      {test:/\.vue$/,loader:'vue-loader'},
      {test:/\.(ts|js)x?$/,exclude:/node_modules/,loader:'babel-loader'},
      {test:/\.(svg|otf|ttf|woff|woff2|eot|gif|png)$/,loader:'url-loader'},
      {test:/\.(scss|css)/,use:['style-loader','css-loader','sass-loader']}
    ]
  },
  plugins:[
    new VueLoaderPlugin(),
    new HtmlWebpackPlugin({
      template:path.resolve(__dirname,'template.html')
    })
  ]
}

//yarn add webpack@5.26.3 webpack-cli@4.5.0 webpack-dev-server@3.11.2 vue-loader@16.1.2 @vue/compiler-sfc@3.0.7 -D -W
//yarn add babel-loader@8.2.2 @babel/core@7.13.10 @babel/preset-env@7.13.10 @babel/preset-typescript@7.13.0 url-loader@4.1.1 file-loader@6.2.0 html-webpack-plugin@5.3.1 css-loader@5.1.3 sass-loader@11.0.1 style-loader@2.0.0 sass@1.32.8 -D -W
//babel-plugin-module-resolver