webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。

一：webpack的作用:
1) 打包(依赖->把多个文件打包成一个js文件)
2) 减少http请求,较少的服务器压力,省宽带
3) 转化(比如 less/sass/ts) 需要loader
4) 优化(SPA越来越盛行,前端项目复杂度高,webpack可以对项目进行优化)

二：webpack安装（前提:必须先确保node环境已经安装了）
webpack webpack库
webpack-cli webpack客户端，包含webpack命令
webpack-dev-server 启动一个web服务

三：.开发环境:
简介:就是平时编写代码的环境
English:development
（2） 生产环境:
简介:项目开发完毕,部署上限
English:production

四： 常用loader：
1.js处理
babel-loader，
2.css处理
style-loader,css-loader,sass-loader,
3.文件处理
url-loader,file-loader 如果文件小于限制就转成DataUrl
4.处理vue文件
vue-loader 加载.vue文件并处理成js

ps:关于loader的写法:
1) use:["xxx-loader","xxx-loader"]
2) loader:["xxx-loader","xxx-loader"]
3) use:[
{loader:"style-loader"},
{loader:"style-loader"}
]

五：常用插件

1.      CommonsChunkPlugin  抽取页面逻辑，已弃用，使用
   

2.     html-webpack-plugin   处理html
   

3.      HotModuleReplacementPlugin  模块热替换，webpack4.0的支持不够好
   

4.     UglifyjsWebpackPlugin 处理js，已启用合并到webpack4.0 webpack -p会压缩js和css
   

5.      clean-webpack-plugin  删除构建的文件夹
   

6.    mini-css-extract-plugin 抽取css，替代extract-text-webpack-plugin
   

7.     vue-loader/lib/plugin  引入vue-loader
   

8.     html-webpack-plugin   处理html，并自动引用output的文件
   

六： 安装命令
全局安装：cnpm install -g webpack, webpack-cli, webpack-dev-server
本地安装：cnpm install -D|--save-dev babel-loader

七：webpack执行命令:
webpack src/indexjs --output dist.bundle.js 在没有配置文件的情况下的执行方式
webpack 配置文件后直接webpack执行
webpack --mode development 开发环境编译
webpack --mode production 生产环境编译(压缩文件)
webpack --help 指令帮助(提示能用那些webpack的命令)
webpack -p 生产环境编译，自动压缩css、js
webpack -w 监听文件并实时构建
--devtool eval 为你的代码创建源地址。当有任何报错的时候可以让你更加精确地定位到文件和行号
--progress 显示合并代码进度
--colors --hot 命令行中显示颜色
--content-base 指向设置的输出目录

八：webpack配置文件:
文件名:webpack.config.js 遵循commonJS规范
配置文件结构示例:
module.exports = {
entry:{}, 入口文件
output:{}, 出口文件 //整体打包的路径注意点需要一个绝对路径
module:{ 加载器
rules:[
{
test:/.js$/, 正则判断文件类型
exclude:"node_modules", 排除那些目录文件不使用babel-loader
use:["babel-loader],
}
]
},
plugins:[], 插件
devtool:"", 开发配置
devServer:{} 开发服务器
}

具体引用

   const path = require('path');
    const webpack = require('webpack');
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    const CleanWebpackPlugin = require('clean-webpack-plugin');
     const MiniCssExtractPlugin = require('mini-css-extract-plugin');
  // 引入vue-loader
const VueLoaderPlugin = require('vue-loader/lib/plugin')

//配置插件
const plugins = [
// 引入vue插件
new VueLoaderPlugin(),
// 从页面中抽离css
new MiniCssExtractPlugin({
    filename: '[name].[contenthash:6].css'
}),
// 删除构建目录
new CleanWebpackPlugin(['build/assets/']),
//处理html，并自动引用output的文件
new HtmlWebpackPlugin({
    //目标文件
    filename: '../index.html',
    //模版文件
    template: './src/index.html',
    //对文件进行压缩
    minify: {
        //压缩代码
        minimize: true,
        //移除注释
        removeComments: true,
        //去掉空格
        collapseWhitespace: true,
        //压缩行内css
        minifyCSS: true,
        //压缩行内js
        minifyJS: false
          }
        })
    ];

   module.exports = {
//构建模式，development or production
mode: process.env.NODE_ENV || 'development',
//输入配置
entry: {
    index: './src/js/index.js',
    vendors: ['jquery']
    },
    //输出配置
    output: {
    filename: '[name].[hash:6].js',
    path: path.resolve(__dirname, 'build/assets/'),
    publicPath: 'assets/'
},
    //是否生成source map以及如何生成
    devtool: 'eval-source-map',
    // devtool: 'none',
  devServer: {
      //serve加载的目录
      contentBase: './build',
      port: 9000,
    //打开浏览器
    open: true,
    //启用gzip压缩文件
    compress: true,
    //强制页面访问index.html
    historyApiFallback: true,
    //实时刷新
    inline: true,
    //支持模块热更新
    hot: true
                },
//模块操作
      module: {
      rules: [{
            test: /\.vue$/,
            loader: 'vue-loader'
        },
        {
            test: /\.(js|jsx)$/, //正则判断文件类型
            exclude: /node_modules/, //排除这个文件夹不处理
            use: ['babel-loader'] //使用加载器  
        },
        {
            test: /\.css$/,
            use: [MiniCssExtractPlugin.loader, 'css-loader']
        },
        {
            test: /\.scss$/,
            use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
        },
        {
            test: /\.(gif|png|jpe?g|svg)$/i,
            use: [{
                loader: 'url-loader',
                options: {
                    name: '[name].[hash:6].[ext]',
                    limit: 1024
                }
            }]
        },
        {
            test: /\.(eot|ttf|svg|woff)$/,
            use: ['url-loader']
          }
        ]
      },
  plugins,
  optimization: {
      splitChunks: {
          cacheGroups: {
              commons: {
                test: /[\\/]node_modules[\\/]/,
                name: "vendors",
                  }
              }
            }
      }
  };

vue写法

            <template>

         <div>

         <h2>{{message}}</h2>
     <ul>
     <li v-for="(item,index) in arr">与琪{{item}}</li>
  </ul>
 </div>

    </template>
  <script>
     export default {
      data: function(){
          return {
             message: 'Hello Vue!',
              arr: [1,2,3,4,5,6]
          }
      }
    }
                  </script>

相关js的写法

1.png