webpack的安装过程

npm install -g webpack 还有cli

npm init  在指定文件夹执行此命令，可以自动创建package.json文件；

package.json是标准的npm说明文件，里面列出了当前项目的依赖模块，用户信息，自定义的脚本任务等；

在根目录创建app和public文件夹：

1、app文件夹用来存放原始数据和我们写的js模块

2、public文件夹用来存放供浏览器读取的文件（即本地服务器所加载的目录），包括index.html、打包生成的js文件

• index.html --放在public文件夹中; -----------------自动加载主页
• Greeter.js-- 放在app文件夹中;
• main.js-- 放在app文件夹中;-------------------入口文件

在index.html里事先引入打包后的js（bundle.js)文件

使用配置文件来使用webpack，配置文件其实也是一个简单的js模块

1、首先，在根目录下新建一个名为webpack.config.js的文件

module.exports = {
  entry:  __dirname + "/app/main.js",//已多次提及的唯一入口文件
  output: {
    path: __dirname + "/public",//打包后的文件存放的地方
    filename: "bundle.js"//打包后输出文件的文件名
  }
}
注：“__dirname”是node.js中的一个全局变量，它指向当前执行脚本所在的目录。
复制代码

Source Maps：在一个单独的文件中产生一个完整且功能完全的文件。这个文件具有最好的source map，但是它会减慢打包速度；

webpack.config.js文件

配置sourcemap

入口文件

出口文件

服务器的配置选项

• 服务器加载页面所在的目录
• 实时更新
• 跳转
• port：8080

loader

babel-loader\style-loader\

test：一个用以匹配loaders所处理文件的拓展名的正则表达式（必须） loader：loader的名称（必须） include/exclude:手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）（可选）； query：为loaders提供额外的设置选项（可选）

module: {
        rules: [
            {
                test: /(\.jsx|\.js)$/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: [
                            "env", "react"
                        ]
                    }
                },
                exclude: /node_modules/
            }
        ]
    } 复制代码

插件（Plugins）：loaders是在打包构建过程中用来处理源文件的（JSX，Scss，Less..），一次处理一个，插件并不直接操作单个文件，它直接对整个构建过程其作用。

const webpack = require('webpack');

module.exports = {
...
    module: {
        rules: [
            {
                test: /(\.jsx|\.js)$/,
                use: {
                    loader: "babel-loader"
                },
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: [
                    {
                        loader: "style-loader"
                    }, {
                        loader: "css-loader",
                        options: {
                            modules: true
                        }
                    }, {
                        loader: "postcss-loader"
                    }
                ]
            }
        ]
    },
    plugins: [
        new webpack.BannerPlugin('版权所有，翻版必究')
    ],
};复制代码

转载于:https://juejin.im/post/5b77964df265da436c51b417