2.全局安装wepack,为了使用webpack命令.

cnpm i webpack -g

3.全局安装webpack-cli

cnpm i webpack-cli -g

4.新配置文件,默认的文件名webpack.config.js,如果文件名不是默认的话,执行
webpack --config webpack.自定义名字.js

webpack --config webpack.dev.js

mode://设置环境.‘production’(生产环境) ‘development’(开发环境) 任意一个
在配置文件里面设置mode:‘production’
在package.json里面设置

"scripts": {
"build": "webpack --config webpack.dev.js --mode production",
"dev": "webpack-dev-server --config webpack.dev.js --mode development"
}

entry:入口文件的路径	string	|	array	|	object   前两个是单入口文件的时候用,

	entry:{//   多入口文件的时候用.
			key1:value1,
			key2:value2
				}

output: {
path: 编译之后的文件路径
filename: 编译之后的名称//多入口的时候,出口 '[hash]+[name].js ’
}

webpack 3.x | babel-loader 8.x | babel 7.x

npm install babel-loader@8.0.0-beta.0 @babel/core @babel/preset-env webpack

webpack 3.x babel-loader 7.x | babel 6.x

npm install babel-loader babel-core babel-preset-env webpack

module:{
	rules:[
	//babel-loader  //配置顶
	1.新建.babelrc文件
	   "presets":[
	       "@babel/preset-env"
	   ]
	2.在loader里面写
	options: {
				test: /.(js|jsx)$/,
          		loader: 'babel-loader',
                "presets": ['@babel/preset-env']
            }
		]
}

抽离CSS
1.0下载

cnpm install --save-dev extract-text-webpack-plugin@next

它会将所有的入口 chunk(entry chunks)中引用的 *.css，移动到独立分离的 CSS 文件。因此，你的样式将不再内嵌到 JS bundle 中，而是会放到一个单独的 CSS 文件（即 styles.css）当中。 如果你的样式文件大小较大，这会做更快提前加载，因为 CSS bundle 会跟 JS bundle 并行加载。

2.0下载插件

cnpm install --save-dev extract-text-webpack-plugin

2.1引入插件

const ExtractTextPlugin = require("extract-text-webpack-plugin");

2.2清空

cnpm install --save-dev clean-webpack-plugin

const CleanWebpackPlugin = require("clean-webpack-plugin"); //做清空,每次更新后最新的

2.3生成一个HTML文件

cnpm install --save-dev html-webpack-plugin

2.3.1

const HtmlWebpackPlugin = require('html-webpack-plugin');

扩展压缩

 plugins: [
        new ExtractTextPlugin("styles.css"),
        new CleanWebpackPlugin(), //打包之前清除build里面的文件
        new HtmlWebpackPlugin({
            template: 'index.html', //要编译的模板
            title: '1701B',
            filename: 'app.html', //重命名的文件名
            inject: true, //是否注入js/css,默认是true
            minify: {
                collapseWhitespace: true,
                removeComments: true,
                removeRedundantAttributes: true,
                removeScriptTypeAttributes: true,
                removeStyleLinkTypeAttributes: true,
                useShortDoctype: true
            }
        })
    ]

注意!
如果你有多个 webpack 入口点， 他们都会在生成的HTML文件中的 script 标签内。

如果你有任何CSS assets 在webpack的输出中（例如， 利用ExtractTextPlugin提取CSS）， 那么这些将被包含在HTML head中的标签内。

3.0调用插件

 plugins: [
    new ExtractTextPlugin("styles.css"),
  ]

4.0使用插件,在loader里面使用

{
                test: /.scss$/,
                use: ExtractTextPlugin.extract({
                        fallback: 'style-loader',//在结束的时候执行的loader
                        use: ['css-loader', 'sass-loader']//运行的过程中执行的loader
                    })
                    // use: ['style-loader', 'css-loader', 'sass-loader']
            }

没有下载本地的webpack

const path = require('path');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const CleanWebpackPlugin = require("clean-webpack-plugin"); //做清空,每次更新后最新的
const HtmlWebpackPlugin = require('html-webpack-plugin'); //自动复制一份html文件到build文件夹下
const webpack = require('webpack');
const list = require('./src/data/list.json')
module.exports = {
    entry: path.join(__dirname, './src/index.js'), //读取路径   单个入口文件,
    // entry: {
    //     index: path.join(__dirname, './src/index.js'),多个入口文件{}传入
    //     app: path.join(__dirname, './src/app.js')
    // }

    output: { //出口文件
        path: path.join(__dirname, 'build'), //自定义路径
        // filename: '[hash]-[name].js' //固定写法   [hash]事实更新js文件
        filename: '[hash]-[name].js' //固定写法   [name].js
    },
    module: {
        rules: [{
                test: /.(js|jsx)$/, //需要匹配的文件.js/jsx结尾
                loader: 'babel-loader',
                options: {
                    "presets": ['@babel/preset-env']
                }
            }, {
                test: /.css$/,
                use: ['style-loader', 'css-loader'],
            }, {
                test: /.(img|jpg|gif)$/, //需要配置的匹配图片的格式
                loader: 'url-loader',
                options: { //设置当前的loader的配置值
                    limit: 4000
                }
            },
            {
                test: /.(eot|svg|ttf|woff)$/, //icon图标
                loader: 'file-loader', //小文件类型   icon图标
                options: {
                    name: './iconfont/[name].[ext]'
                }
            },
            {
                test: /.scss$/,
                use: ExtractTextPlugin.extract({
                        fallback: 'style-loader',
                        use: ['css-loader', 'sass-loader']
                    })
                    // use: ['style-loader', 'css-loader', 'sass-loader']
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin("style.css"),
        new CleanWebpackPlugin(), //打包之前清除build里面的文件
        new HtmlWebpackPlugin({
            template: 'index.html', //要编译的模板
            title: '1701B',
            filename: 'app.html', //重命名的文件名
            inject: true, //是否注入js/css,默认是true
            minify: {
                removeAttributeQuotes: true, //去除引导
                collapseWhitespace: true, //去除空格
                removeComments: true, //去除注释
                removeEmptyAttributes: true //去除空属性
            }
        }),
        new webpack.HotModuleReplacementPlugin() //模块热更新

    ],
    devServer: { //dev开发环境
        open: true,
        port: 8084,
        host: 'localhost',
        hot: true,
        // inline: true, //等同于livereload自动刷新
        before(app) { //相当于middlewere  做拦截请求
            app.get('/api/list', function(req, res, next) {
                res.json({ code: 1, data: list });
            });
        }

    }
}