webpack的使用

Webpack的工作方式

把你的项目当做一个整体，通过一个给定的主文件（如：index.js），
Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理
它们，最后打包为一个（或多个）浏览器可识别的JavaScript文件。

安装webpack及相关组件

• 安装常用模块

npm init  //初始化
npm install --save-dev webpack //安装webpack
npm install --save-dev webpack-dev-server //安装本地服务
npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react //安装es6，jsx等解析包
npm install --save-dev style-loader css-loader //安装处理样式文件的包

• 安装需要的前端框架

npm install --save react react-dom //安装react组件
import React from 'react';
import ReactDOM from 'react-dom';  //在main.js文件中导入react

npm install jquery --save  //安装jQuery组件
import $ from 'jquery';  //在main.js文件导入jQuery

根目录所有文件

• 在根目录存在的文件和文件夹有：

package.json //项目配置文件
webpack.config.js //关于打包信息的配置文件
.babelrc //关于babel的配置文件
node_modules //所有依赖的包文件
src //开发所有的html，css，js，image文件

打包的配置文件

module.exports = {
  devtool: 'eval-source-map',////调试工具
  entry:  __dirname + "/js/main.js",////入口文件
  output: {     ////出口文件
    path: __dirname + "/js",
    filename: "[name].bundle.js"
  },
  devServer: {////本地服务器配置
    contentBase: "./public",//目录
    historyApiFallback: true,//不跳转
    inline: true//实时刷新
  },
  module: {
       rules: [
            {
                test: /(\.jsx|\.js)$/,
                use: {
                    loader: "babel-loader"
                },
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: [
                    {
                        loader: "style-loader"
                    },
                    {
                        loader: "css-loader",
                        options: {
                                  modules: true
                                  }
                    }
                ]
            }
        ]

    }
}

• 在使用过程中，根据自己需要修改配置文件的入口和出口
• 然后在main.js中合理引用js模块将所有js文件打包成一个js文件供html文件调用
• 至于其他项目文件不用动它，以后有需要在打包样式文件
• 使用webpack –watch命令进行热更新，修改保存之后自动打包便于调试