webpack打包

一、webpack安装

（1）webpack安装

npm install -g webpack webpack-cli

二、打包

(1)js打包

配置（创建webpack.config.js文件）

1. 创建所需的js文件，引入到main.js文件
2. 创建webpack配置文件，并打包信息

const path = require('path'); //node.js内置模块
module.exports = {
   entry: './src/main/js', //配置文件入口
   output: {
     path: path.resolve(_dirname, './dist'), //输出路径，_dirname 指当前文件所在路径
     filename: 'bundle.js'//输出文件
    }
}

3. 使用命令执行打包操作

webpack  //有黄色警告
webpack --mode = development //没有警告 （如果是线上使用 打包webpack --mode = production ）

(2)css打包

1. 创建index.css文件，写样式内容。

比如
body{
   background-color: red;   
}

2. 在main.js引入css文件

//css文件引入
require('./index.css')

3. 安装css加载工具

npm install --save-dev style-loader css-loader

4. 修改webpack配置文件

在webpack.config.js文件添加
const path = require('path'); //node.js内置模块
module.exports = {
   entry: './src/main/js', //配置文件入口
   output: {
     path: path.resolve(_dirname, './dist'), //输出路径，_dirname 指当前文件所在路径
     filename: 'bundle.js'//输出文件
    }
   **module**: {
     rules: [{
              test: /\.css$/,  //打包规则应用到以css结尾的文件上（良好习惯）
             use: ['style-loader','css-loader']
          }]
    }
}

后续，学习中......