webpack从零搭建开发环境

npm init -y
npm i webpack webpack-cli --save-dev

npm -S 是--save的缩写  是生产
npm -D 是--save-dev的缩写  是开发

  npx webpack

  npx webpack --mode development  开发环境不会被压缩

  "scripts": {
  	"build":"webpack --mode production",
  "},

module.exports={ //入口 entry:path.resolve(__dirname,'./src/index.js'), //写路径都采用绝对路径 }

module.exports={ output:{ filename:"bundle.js", path:path.resolve(__dirname,"dist"); } }

module.exports = { mode: "development" //当前是开发模式 }

"scripts": { "build": "webpack", "dev":"webpack" }, //- 变量的形式

module.exports = (env)=>{ //env 环境变量 console.log("mode",env) //函数要返回配置文件，没返回会采用默认配置 }

"scripts": { "build": "webpack --env.production", "dev":"webpack --env.development" },

"scripts": {
    "build": "webpack --env.production --config ./build/webpack.base.js",
    "dev": "webpack --env.development --config ./build/webpack.base.js"
},

npm i webpack-merge --save-dev

if(isDev){
  return merge(base,dev)
}else{
  return merge(base,prod)
}

npm i webpack-dev-server --save-dev

 "scripts": {
    "build": "webpack --env.production --config ./build/webpack.base.js",
    "dev": "webpack-dev-server --env.development --config ./build/webpack.base.js"
  },

module.exports={
    mode:"development",
    devServer:{  //开发服务的配置
       port:3000,
       compress:true, //gzip 可以提升返回页面的速度
       contentBase:path.resolve(__dirname,'../dist') //webpack启动服务会在dist目录下
    }
}

npm i html-webpack-plugin --save-dev

 plugins:[
         new HtmlWebpackPlugin({
             template:path.resolve(__dirname,'../public/index.html'),
             filename:"index.html",
             minify:!isDev&&{
                 removeAttributeQuotes:true,  //去掉双引号
                 collapseWhitespace:true   //去掉空格
            }
         })
     ]

npm i clean-webpack-plugin --save-dev

  //每次打包先清空dist文件夹
  new CleanWebpackPlugin({
       cleanOnceBeforeBuildPatterns: ['**/*']   //打包之前清空目录  默认是这个配置  所有目录下的所有文件
  }),

// index.js
import './index.css'
//引入css

npm i css-loader style-loader --save-dev

转化什么文件 用什么去转  使用那些loader
loader写法 可以是[] 也可以是{}也可以是""
rules:[
  {
   test:/\.css$/,
   use:['style-loader','css-loader']
  },
]

npm i node-sass sass-loader --save-dev

匹配到scss结尾的文件使用sass-loader来调用node-sass处理sass文件
{
test:/\.scss$/,
use:['style-loader','css-loader','sass-loader']
}

rules:[
  {
    test:/\.css$/,
    use:['style-loader',{
      loader:'css-loader',
      options:{
          importLoaders:1
      }
    },'sass-loader']
  },
]

npm i postcss-loader --save-dev
 npm i autoprefixer --save-dev

module.exports={
    plugins:[
        require("autoprefixer")
    ]
}

cover 95%

npm i mini-css-extract-plugin --save-dev

new MiniCssExtractPlugin({  //如果是开发模式就不要用抽离样式的插件
    filename:"css/main.css"
})

{
  test: /\.css$/,
  use: [
    isDev?'style-loader':MiniCssExtractPlugin.loader,
     {
    loader: 'css-loader',
    options: {
      importLoaders: 2
    }
  }, 'postcss-loader', 'sass-loader']
}

const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const TerserJSPlugin = require('terser-webpack-plugin');
module.exports={
    mode:"production",
    optimization: {  //优化项
        minimizer:[  //可以放置压缩方案
            new OptimizeCSSAssetsPlugin(),  //用了这个 js也得手动压缩
            new TerserJSPlugin()
        ]
    },
}

 npm i file-loader --save-dev
 npm i url-loader --save-dev

{
	test:/\.(woff|ttf|eot|svg)/,
	use:"file-loader"
},
{
	test: /\.(jpe?g|png|gif|jpg)$/,
	use: {
		loader: "url-loader",
		//如果大于100k的图片继续使用file-loader
		options: {
			name: 'image/[contentHash].[ext]',
			limit: 100 * 1024
		}
	}
	//file-loader  默认的功能是拷贝的功能
	//我希望是当前比较小的转化成base64 比以前大 好处就是不用发http请求
}

  { //解析js文件 调用@babel/core
      test:/\.js$/,
      use:"babel-loader"
  },

{
    "presets:[
        "@babel/preset-env"  //从下到上执行 这个是插件包
    ],
    "plugins":[  //从上到下执行   这个是单个插件

    ]
}

npm i @babel/plugin-proposal-class-properties -D

"plugins":[  //从上到下执行
       ["@babel/plugin-proposal-class-properties",{"loose":true}]
    ]

npm i @babel/plugin-proposal-decorators --save-dev

"plugins":[  //从上到下执行
       ["@babel/plugin-proposal-decorators",{"legacy":true}],
       ["@babel/plugin-proposal-class-properties",{"loose":true}]
    ]

"presets":[
        ["@babel/preset-env",{
            "usageBuitIns":"usage"   //按需加载
        }]  //从下到上执行
    ],

npm install --save-dev @babel/plugin-transform-runtime
npm install --save @babel/runtime

npm i @babel/preset-react --save-dev

npm i typescript
npx typescript -init 生成一个typescript文件

declare module "*.vue"{
    import Vue from "vue";
    export default Vue
}

npm i vue-loader vue-template-compiler -D

{
	test:/\.vue$/,
	use:"vue-loader"
},
const VueLoaderPlugin = require("vue-loader/lib/plugin");
new VueLoaderPlugin(),

npm i vue-property-decorator --save-dev

["@babel/preset-typescript",{
	"allExtensions":true
}]