webpack4.0+配置学习笔记一（基础配置）

1、在项目中安装webpack

npm install webpack —D  && yarn add webpack -D
复制代码

其中 -D 等于 --save-dev ，即把此安装包的版本号等信息保存在 package.json 文件中的 devDependencies 内

若是项目中没有 package.json 用 npm init 建立

操做完成后webpack会出如今package.json中，再添加 npm script命令

{
  "name": "bmsh",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "bulid": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.30.0"
  }
}

复制代码

此时在终端输入npm run bulid 会出现提示

意思是 webpack-cli 须要安装， webpack-cli是webpack命令行工具，由于4.0x版本后不能做为webpack的依赖，须要单独安装

此时他们提示我安装，输入yes

测试webpack是否安装成功

• 在根目录下建立一个src文件夹而且建立一个index.js文件并执行 npm run bulid

console.log("hello webpack4.0+"); 
复制代码

说明webpack成功的构建了src/index.js文件，此时根目录下会多一个dist文件夹

2、webpack构建的配置文件

1. 入口 (entry)

   • 单页面应用有一个入口

   // 写法一
   module.exports = {
         entry:{
           main:'./src/index.js'
         }
   }
   // 写法二
    module.exports = {
     entry:'./src/index.js'
   }
   复制代码

   • 多页面应用种，一个页面对应一个入口

   // 多页面入口配置写法一
   
       module.exports = {
         entry:{
           page1:'./src/page-1.js',
           page2:'./src/page-2.js',
         }
       }
       
       
       // 多页面入口配置写法二
       module.exports = {
           entry:{
               main:[
                   './src/page-1.js',
                   './src/page-2.js'
               ]
           }
       }
   复制代码

2. 输出(output)

   //单页面的输出配置
       module.exports = {
           // 此处省略入口配置
           ...
           output:{
           
               //方法会把一个路径或路径片断的序列解析为一个绝对路径
               path:path.resolve(__dirname,'dist'),  
               filename:'bundle.js'
           }
           
       }
       
       module.exports = {
           // 此处省略入口配置
           ...
           output:{
               filename;'[name].js',
               path:__dirname+'/dist',
           }
       }
       
       
   复制代码

   此时又了入口和输出的配置便可用定制配置去构建页面

   path这个声明要在头部去引用node的path 模块

   //webpack.config.js文件
       
        const path = require('path');
       
       //入口&出口配置省略，详见上文
       ....
   复制代码

3. loader(webpack中处理多种文件格式的机制，即转换器，负责把不一样格式的文件转换成wenpeck支持打包的模块)

4. plugin（用于构建更多的任务，例如css单独提取，js压缩等）

3、一份简单的Webpack.config.js配置

const path = require("path");
   const MiniCssExtractPlugin = require("mini-css-extract-plugin");
   module.exports = {
      entry:{
        main:'./src/main.js'
      },
      output:{
        path:path.join(__dirname,'./dist'),
        publicPath:'/dist/',
        filename:'main.js'
      },
      module:{
        rules:[
        // css的提取
          {
            test:/\.css$/,
            use: [
              MiniCssExtractPlugin.loader,
              'css-loader'
            ]
          },
          // vue的转换
          {
            test:/\.vue$/,
            loader:'vue-loader',
          },
          //es6转es5
          {
            test:/\.js$/,
            loader:'babel-loader',
            exclude:/node_modules/
          }
        ]  
      },
      plugins:[
        new VueLoaderPlugin(),
        new MiniCssExtractPlugin({
          filename: 'main.css'
        }),
      ],
     
    };

复制代码

在es6转es5的时候还须要一个.babelrc文件

{
      "presets": ["es2015"],
      "plugins": ["transform-runtime"],
      "comments": false
    }
复制代码