webpack的配置

一、webpack（简化打包代码）

之前打包的命令需要指打包的文件和导报后的文件

image.png

如何简化命令，让webpack自动获取打包文件和打包后的文件。
1.创建webpack.config.js

image.png
2.导出 出口文件和入口文件

module.exports = {
    entry: './src/main.js',
    output: {
        path: './dist',
        filename: 'bundle.js'
    }
}

image.png

说明出口文件的路径是绝对路径

module.exports = {
    entry: './src/main.js',
    output: {
        path: 'C:\Users\Administrator\Documents\HBuilderProject\webpack的基本使用\dist',
        filename: 'bundle.js'
    }
}

虽然path是绝对路径，但是当dist文件换地方时，还需要手动修改绝对地址，所以这种写法不可取。
自动获取绝对路径需要利用node的path模块。
3.导入path模块

const path = require('path');

4.npm init
项目需要利用到node包时，需要利用npm初始化

image.png

初始化后，生成package.jason文件

image.png

5.动态获取绝对路径
resolve('__dirname','dist')
node的path模块中的resolve函数可以拼接绝对路径
__dirname:当前文件路径，也就是webpack.config.js的路径
'dist':拼接在__dirname路径后的字符串

module.exports = {
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname,'dist')
        filename: 'bundle.js'
    }
}

image.png

二、npm run build

可以用npm run build代替webpack命令
在package.jason文件中的script脚本中，添加build的属性，属性值为webpack

image.png image.png

三、安装局部webpack

项目中需要自己安装局部webpack
cnpm install --save-dev webpack@3.6.0

image.png

在文件中自动生成package.json文件和node_modules目录

image.png
在package.jason文件中可以看到下载的本地webpack的版本

  "devDependencies": {
    "webpack": "^3.6.0"
  }