从零开始构建webpack4.+项目

一、安装webpack环境

npm webpack webpack-cli -D

二、初始化项目

npm init

三、添加webpack配置文件webpack.config.js、postcss.config.js

1.webpack.config.js

const {resolve}=require("path");
const HTMLWebpackPlugin=require("html-webpack-plugin");
const MiniCssExtractPlugin=require("mini-css-extract-plugin");//抽取css单独文件
const OptimizeCssAssetsWebpackPlugin=require("optimize-css-assets-webpack-plugin");//压缩css

process.env.NODE_ENV="developement";

module.exports={
  entry:"./src/index.js",
  output:{
    filename:"./js/index.js",
    path:resolve(__dirname,'build'),
    publicPath:"",
  },
  module:{
    rules:[
      {
        test:/\.css$/,
        exclude:"/node_modules/",
        use:[
          MiniCssExtractPlugin.loader,
          // "style-loader",
          "css-loader",
          {
            loader: 'postcss-loader',//css兼容
          }
        ],
      },
      {
        test:/\.less$/,
        use:[
          MiniCssExtractPlugin.loader,
          // "style-loader",
          "css-loader",
          {
            loader: 'postcss-loader',
          },
          "less-loader"
        ]
      },
      {
        test:/\.scss$/,
        use:[
          MiniCssExtractPlugin.loader,
          "css-loader",
          {
            loader: 'postcss-loader',
          },
          "sass-loader"
        ]
      },
      {
        test:/\.(jpg|png|gif|svg)$/,
        loader:"url-loader",
        options:{
          limit:1*1024,
          esModule:false,
          name:"[hash:10].[ext]",
          outputPath:"img"
        }
      },
      {
        test:/\.html$/,
        loader:"html-loader"
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          name:"[hash:10].[ext]"
        },
      }
    ],
  },
  plugins:[
    new HTMLWebpackPlugin({
      template:"./src/index.html"
    }),
    new MiniCssExtractPlugin({
      filename:'./css/index.css'
    }),
    new OptimizeCssAssetsWebpackPlugin()
  ],
  mode:"development",
  devServer:{
    //构建后路径
    contentBase:resolve(__dirname,'build'),
    compress:true,
    port:8090,
    open:true
  }
}

2.postcss.config.js

module.exports = {
  plugins: [
      require('postcss-preset-env')()
  ]
}

3.package.json

{
  "name": "webpackdemo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^5.0.1",
    "file-loader": "^6.2.0",
    "html-loader": "^1.3.2",
    "html-webpack-plugin": "^4.5.0",
    "less": "^3.12.2",
    "less-loader": "^7.1.0",
    "mini-css-extract-plugin": "^1.3.1",
    "optimize-css-assets-webpack-plugin": "^5.0.4",
    "postcss-loader": "^4.0.4",
    "postcss-preset-env": "^6.7.0",
    "sass": "^1.29.0",
    "sass-loader": "^10.1.0",
    "style-loader": "^2.0.0",
    "url-loader": "^4.1.1",
    "webpack": "^4.44.2",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0"
  },
  "dependencies": {},
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}