webpack打包js、css

webpack打包js、css

（参考b站教学视频，仅作记录用）
本次演示的文件结构如下：

1. 创建js和css文件
   （1）mathUtils模块导出add和mul函数：
   
   （2）main.js文件导入mathUtils和依赖的css文件
2. 创建webpack.config.js文件（webpack配置文件）

/** webpack配置文件 */

// 1、配置入口和出口:entry是入口，output是出口
//  注意：output必须是绝对路径,先动态获取路径
    //需要先在控制台执行npm init命令，然后会生成package.json
const path = require('path')
module.exports = {
  entry: './src/main.js',
  output: {
    // path.resolve拼接路径，__dirname是一个全局变量，是当前项目的绝对路径
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        // 匹配所有的css文件
        test: /\.css$/,
        // css-loader只负责加载；style-loader负责将样式添加到DOM中；
        // 使用多个loader是从右向左加载
        use: ['style-loader', 'css-loader']
      }
    ],
  },
}
// 之后在控制台输入 webpack命令即可完成构建
// 或者现在webpack.json中script下面写入"build": "webpack",再输入 npm run build命令构建,这样会先在本地找webpack
// 注意：安装本地webpack：npm install webpack@3.6.0 --save-dev

3. 局部安装webpack：在项目目录下执行

 npm install webpack@3.6.0 --save-dev

4. 安装css-loader和style-loader：在项目目录下执行下面命令：

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

5. 打包文件：

   进入项目对应的目录，执行：npm init
   输入包名，然后一路回车即可
   

执行成功会在项目下生成package.json文件

配置package.json：在script中加入"build": “webpack”

在项目目录下执行 npm run build

可以在dist下看到打包好的文件，然后就可以在其他地方使用啦！
如果需要打包其他文件，需要其他的loader，这里给出webpack官网，可以查看文档寻找相关loader的使用：https://www.webpackjs.com/