markdown 的WebPack

Posted 2021-05-05

### install
```shell
npm i -D webpack webpack-cli
```

### build
```javascript
/* package.json */
"scripts": {
  "build": "webpack"
}
```
```shell
/* terminal */
npm run build
```

### production & development mode
```javascript
/* package.json */
"scripts": {
  "dev": "webpack --mode development",
  "build": "webpack --mode production"
}
```

### entry & output
```javascript
/* package.json */
"scripts": {
  "dev": "webpack --mode development ./another/src/index.js --output ./another/dist/main.js",
  ...
}
```

### dev server
```shell
npm i -D webpack-dev-server
```
```javascript
/* package.json */
"scripts": {
  "start": "webpack-dev-server --mode development --open",
  ...
}
```

### install
```shell
npm i -D @babel/core @babel/preset-env babel-loader 
```

### config
```javascript
/* .babelrc */
{
  "presets": [
    "@babel/preset-env"
  ]
}
```
```javascript
/* webpack.config.js */
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      }
    ]
  }
}
```
```javascript
/* 
  else 
  package.json
*/
"scripts": {
  "dev": "webpack --mode development --module-bind js=babel-loader",
  ...
}
```

```

### install
```shell
npm i -D css-loader mini-css-extract-plugin css-loader 
# sass
npm i -D node-sass sass-loader
# postcss
npm i -D postcss-loader autoprefixer
```

### config
```javascript
/* package.json */
{
  "browserslist": [
    "last 2 versions"
  ]
}
```
```javascript
/* postcss.config.js */
module.exports = {
  plugins: [
    require('autoprefixer')
  ]
}
```
```javascript
/* webpack.config.js */
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader']
      },
      {
        test: /\.scss$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader']
      }
      ...
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "[name].css",
      chunkFilename: "[id].css"
    }),
    ...
  ]
}
```
```javascript
/*  example ./src/index.js */
import style from './main.css'
import from './another.css'
import from './whatever.scss'
```