webpack打包使用

md创建文件夹 dir是遍历
如何安装node环境 首先下载安装包;安装好以后 使用cmd命令 建立一个新的文件夹（一定是英文的），然后cmd 命令中 cd 进入所安装的盘的地址。 
在该文件夹下面 使用npm 命令 （ npm install -g webpack）下载该文件
然后下载（npm install webpack）然后（npm install -g webpack-cli）
然后（npm install webpack-cli）安装好以后。mkdir创建文件夹 
使用 module.exports = function(){} (表示一个模块) 创建app 文件夹，使用（type nul>2.js）可以创建js文件。
创建一个public文件夹。将书写的html文件放入该文件下。创建一个webpack.config.js。在该js文件中写进如下代码。

module.exports = {
entry: __dirname + "/app/main.js",//已多次提及的唯⼀一⼊入⼝口⽂文件
    output: {
    path: __dirname + "/public",//打包后的⽂文件存放的地⽅方
    filename: "bundle.js"//打包后输出⽂文件的⽂文件名
    }
}
命令行中输入webpack就可以进行打包操作了。
npm init 表示初始化 可以直接确认也可以自己设置一下。
确定创建一个package文件。然后在该文件的scrpit标签里写入一个("start":"webpack");
然后可以使用 npm start来运行打包功能。如果标签里输入的不是start 那么需要写一个 npm run 输入的内容。

在命令行输入npm install webpack-dev-server （创建一个本地的服务器）然后输入服务器的代码。

module.exports = {
entry: __dirname + "/app/main.js",//已多次提及的唯⼀一⼊入⼝口⽂文件
    output: {
    path: __dirname + "/public",//打包后的⽂文件存放的地⽅方
    filename: "bundle.js"//打包后输出⽂文件的文件名
    },
    devServer: {
    contentBase: "./public",//本地服务器器所加载的⻚页⾯面所在的⽬目录
    historyApiFallback: true,//不不跳转
    inline: true//实时刷新
    }
}
在package.json的script的标签中写入（"server": "webpack-dev-server --open"）;
然后在命令行里 输入 npm run server。
默认端⼝口是8080，如果8080被占⽤用，端⼝口则⾃自动改为8081，当然端⼝口也可以在
webpack.config.js 中自己修改：在的devServer.
设置端口是port
这里的自动刷新，并不会重新生成 public/bundle.js 文件。仅仅只是在使⽤用
8088端口时，修改了 bundle.js 的内容。所以代码调试成功之后，需要在命令行
中 ctrl+c 终止服务器，然后 npm start 重新打包文件。
Loaders
在 webpack.config.js ⽂文件中，输⼊入代码：
module: {
    rules: [
            {
                test: /(\.jsx|\.js)$/, // 正则：扩展名为.jsx或者.js的⽂文件
            use: {  // jsx和js⽂文件，使⽤用该规则进⾏行行编译（es6转es5）
                    loader: "babel-loader",  // 载⼊入的程序
                    options: {  // 选项
                            presets: [ // 预先设置,用得最多的是解析Es6的babel-env-
                                        preset包和解析JSX的babel-preset-react包
                                        "env", "react"
                                    ]
                        }
            },
            exclude: /node_modules/  // 排除这个目录
        }
    ]
}