webpack安装与使用

安装

npm i [email protected] -g 或者 cnpm i [email protected] -g

初始化配置文件

npm init -y

安装依赖文件

npm i [email protected] -D

在项目根目录路新建webpack.config.js文件

webpack.config.js 文件名不可更改

const webpack = require('webpack');
const path = require('path');
//导出配置对象
module.exports = {
    //入口文件 (相对路径./src)
    entry: './src/js/index.js',
    //配置输出
    output: {
    //输出的路径
    //__dirname 指向文件的根目录
      path: path.resolve(__dirname, 'dist/js'),
    //输出的文件名
      filename: 'bundle.js'
    },
    //是否开启观察者
    watch:true
  };

loader 的使用

1. 先确定模块加载的类型
2. 到官网寻找对应的loader
   https://www.webpackjs.com/loaders/

3. 安装对应的loader
   npm i loader名 -D
   例如: npm install style-loader --save-dev // 安装style-loader
4. 新增loader配置

//Loader的配置
    module: { // 模块加载器
        rules: [ // 验证规则
          {
            test: /\.css$/, // 匹配模块的类型
            use: ["style-loader","css-loader"]
          },
        ]
      }

热刷新

全局安装
npm i [email protected] -g
项目内局部安装
npm i [email protected] -D
运行命令
webpack-dev-server

//导出配置对象
module.exports = {
    //入口文件
    entry: './src/js/index.js',//单入口
    // entry: ['./src/js/a.js', './src/js/c.js'], //多入口
    // entry: {
    //     // key(模块名):value(路径)
    //     aModule: './src/js/a.js',
    //     cM: './src/js/c.js'
    // }, //多入口出口
    //配置输出
    output: {
    //输出的路径
    //__dirname 指向文件的根目录 (本地路径 硬盘的文件路径)
      path: path.resolve(__dirname, 'dist/js'), 
    //输出的文件名
      filename: 'bundle.js',

// ------------------------------------------------------------------
      // 对应多出口
      chunkFilename: '[name].js',   //[name] 读取模块名，也是就是key值
      // 输出到内存中的 文件路径
      publicPath: '/dist/js/', // 热刷新 指向文件的目录 
    },
    //Loader的配置
    module: { // 模块加载器
        rules: [ // 验证规则
          {
            test: /\.css$/, // 匹配模块的类型
            use: ["style-loader","css-loader"]
          },
          {
              test: /\.less$/,
              use: [
                  {loader: "style-loader"},
                  {loader: "css-loader"},
                  {loader: "less-loader"}
              ]
          },
          {
              test:/\.(jpg|png|gif)$/,
              use:[
                {
                    loader: "url-loader",
                    options: {
                        limit: 8192
                    }
                }
              ]
          }
        ]
      },
    //是否开启观察者
    // watch:true
    //插件
    plugins: [
      // //压缩插件
      // new webpack.optimize.UglifyJsPlugin({
      //     //去掉所有注释
      //     comments:false,
      //     //抑制警告
      //     compress:{
      //         warnings:false
      //     }
      // }),
      // new webpack.BannerPlugin('author: Itsource')
      //提取公共模块插件
      // new webpack.optimize.CommonsChunkPlugin('aaaa')
    ]
  };