webpack4简单入门

webpack4想使用命令行的话，需要安装webpack-cli，这个webpack-cli是在命令输入webpack <entry>等指令操作的基础；可以加上npx即如：npx webpack <entry>这样来调用

npx webpack <entry>

所以不影响的话，可以全局安装，这样就不需要每次都加上npx了

npm install webpack-cli -g

或者说不要全局安装，直接装在项目里，然后配置package.json的script也可以

需要说的是在命令行使用webpack指令时，其实是在执行webpack.config.js里的配置，单独使用webpack时其实是执行了webpack.config.js文件，而webpack后面加上的指令，其实也是配置项，但是优先级高于webpack.config.js，如webpack <entry> -o <output>里的<entry>和<output>在webpack.config.js也可以配置，但如果你给出这些配置的话，就会覆盖掉webpack.config.js里的配置

处理CSS

首先，webpack允许在入口文件直接引入其他不是js的文件，当然想要有作用还必须安装各种loader，如引入CSS文件，在入口js文件，可以直接这样写

/* style.css */
body {
   
  background-color: red;
}

/* index.js */
require('./style.css')

或者这样写，webpack同时支持直接使用ES6的模块化和Nodejs的模块化

/* index.js */
import './style.css'

webpack从入口文件就可以看到这个css文件，并且做出处理，当然如果没有loader就会报错，差不多如下

Module parse failed: Unexpected token (x:x)
You may need an appropriate loader to handle this file type, 
currently no loaders are configured to process this file.
See https://webpack.js.org/concepts#loaders

所以需要安装loader

npm install -D style-loader css-loader

在webpack.config.js配置loader

module.exports = {
   
  module: {
   
    rules: [
      {
    test: /\.css$/, use: ['style-loader', 'css-loader'] }
    ]
  }
}

注意，要想处理css文件，并成功把样式运用到页面上，需要这两个loader，缺一不可，webpack看到css文件后第一先交给css-loader处理，css-loader如果没有，只有style-loader的话也会报和上面同样的错误信息，因为没有东西可以接受这种文件，而style-loader是把css-loader处理后的样式应用到引用这个js文件html文件的style标签里，如下面index.html文件直接引用打包好的bundle.js文件，而如果没有style-loader的话，系统没有报错，但是样式是没有应用的!

提取CSS

就是在打包的时候，把css抽取到一个独立的文件，而不是在bundle.js里。这里需要用到一个插件mini-css-extract-plugin，以下是它的地址

https://github.com/webpack-contrib/mini-css-extract-plugin

大概是这样用的，注意用的时候是取代style-loader或者vue-style-loader之类的最后应用型的loader，即css的loader处理链的最后一个（代码上看是第一个）

npm install -D mini-css-extract-plugin

let MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
   
  module: {
   
    rules: [
      /*
        {
           test: /\.css$/,
           use: ['style-loader', 'css-loader']
        },
     */
      {
   
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader']
      },
      {
   
        test: /\.styl$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'stylus-loader']
      }
    ]
  },
  plugins: [new MiniCssExtractPlugin()]
}

但是这样子提取的css是没有被压缩的，如果想压缩需要安装优化插件

npm install -D optimize-css-assets-webpack-plugin

之后在配置文件配置

const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
// .....
 optimization: {
   
    minimizer: [
      new OptimizeCSSAssetsPlugin({
   })
    ]
  },
 plugins: [
//........

这样生成的css就是被压缩的了

加载图片资源

webpack也可以处理静态资源，当你在入口文件导入图片时，webpack可以把这个图片导出到dist目录，这个功能需要使用file-loader

npm install file-loader -D 

在webpack.config.js里，添加规则