webpack安装

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

一、安装webpack

cnpm install webpack

加上-g 代表全局安装，使用cnpm淘宝的镜像安装速度比较快。

使用webpack -v输出版本号

PS D:\app> webpack -v
4.30.0

Loader：

Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。

安装 css-loader 和 style-loader：

cnpm install css-loader style-loader

在执行webpack的过程中可能会遇到一些问题：

1.ERROR in Entry module not found: Error: Can't resolve 'babel-loader' in 'D:\app'

cnpm install css-loader style-loader

2.ERROR in Entry module not found: Error: Can't resolve 'babel-loader' in 'D:\app'

cnpm install babel-loader --save

3.Error: Cannot find module '@babel/core'babel-loader@8 requires Babel 7.x (the package '@babel/core').

cnpm install --save-dev babel-loader@7

4.Error: Cannot find module 'babel-core'

 cnpm install --save-dev babel-core

5.Error: Couldn't find preset "es2015" relative to directory "D:\\app\\app"

cnpm install --save-dev babel-preset-es2015

6.Error: Couldn't find preset "react" relative to directory "D:\\app\\app"

 cnpm install --save-dev babel-preset-react

最后

PS D:\app> webpack
Hash: b64a7ca25db22e212c20
Version: webpack 4.30.0
Time: 3137ms
Built at: 2019-04-15 20:55:28
   Asset       Size  Chunks             Chunk Names
index.js  987 bytes       0  [emitted]  main
Entrypoint main = index.js
[0] ./app/index.js 60 bytes {0} [built]

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/

成功！

其中使用npm 或是 使用cnpm不一致可能出现错误。

二、打包文件

使用webpack命令来打包：
 

webpack runoob.js  bundle.js

但是由于webpack4.0以上的版本要特别注意，有不少版本命令会因版本差异而失效。上面的打包命令应替换为

webpack runoob.js -o bundle.js

我们可以将一些编译选项放在配置文件中，以便于统一管理webpack.config.js文件，对于webpack4.0版本，配置文件发生了一些变化，如下：

var path = require("path");
module.exports = {
    entry:'./app/index.js',
    output:{
        filename:'index.js',
        path:path.resolve(__dirname,'dist'),
        publicPath:'temp/'                       //公共路径，从内存中读取
    },
    devServer:{
        contentBase:'./',
        host:'localhost',
        compress:true,
        port:1818
    },
    module:{
        rules:[ 
            {
                test:/\.js$/,
                exclude:/node_modules/,
                loader:'babel-loader',
                options:{
                    presets:["es2015","react"]
                }
            }
        ]
    }
}