webpack基础用法 - HelloWorld开发者社区

----------webpack的用法全在配置中！！
webpack是在node环境下运行的，学习webpack之前，请先自行安装node环境（含npm）；

安装webpack：

第一步：
    npm install -g webpack       //全局安装
第二步：
    建立项目文件夹，如“demo”
    cd demo
    npm init    //一直回车下去
    npm install webpack --save-dev    //项目目录本地安装

搭建目录结构

在项目根目录“demo”下的简单目录结构如下：
    --app
        --index.js    //入口文件
    --node_modules    //安装modules时，自动建立
    --tem    //HTML模板文件夹
        --index.html
    --webpack.config.js    //自建，不会自动生成；一般会有开发和发布两种配置文件
    --package.json    //由npm init时自动建立

webpack简单配置：

webpack的用法全部都在webpack.config.js中；其他地方不要夹杂webpack配置的内容；

//webpack.config.js写入以下内容
    //引入内置功能模块(不需要另行安装)；
    var path = require('path'); 
    var webpack = require('webpack');
    //引入第三方功能模块（需要另行安装）；

//关于第三方模块的用法，强烈建议直接看文档；

    var HtmlWebpackPlugin = require('html-webpack-plugin');
    
    //定义常用路径变量；   
    //返回当前文件（webpack.config.js）所在位置
    var ROOT_PATH = path.resolve(__dirname); 
    var APP_PATH = path.resolve(ROOT_PATH,'app');    //拼接路径；
    var TEM_PATH = path.resolve(ROOT_PATH,'tem');
    var BUILD_PATH = path.resolve(ROOT_PATH,'build');
    
    module.exports = {
        entry : {
            //入口文件
            app : APP_PATH,
            vendors : ['react','react-dom']
        },
        output : {
            //产出路径；
            path : BUILD_PATH,
            filename : '[name].js'    
        },
        module : {
            //一切资源(images/css/js...)皆模块，一切需要loader解析；
            loaders : [
                {test:/\.js?$/,
                    loader:'jsx',
                    exclude:/node_modules/}
            ]
        },
        plugins : [
            //生成HTML文件；
            new HtmlWebpackPlugin({
                title : 'Hello world app!',
                template : path.resolve(TEM_PATH,'index.html'),
                filename : 'index.html',
                chunks : ['vendors','app'],
                inject : 'body',
                // chunksSortMode : "none"
            }),
            new webpack.HotModuleReplacementPlugin()    //保证实时刷新；
        ],
        devServer:{
            //实时刷新，需要inline model和hot:true
            histroyApiFallback : true,
            hot : true,
            inline : true,
            progress : true
        }
    }

注意：webpack分析webpack.config.js中的entry file到其他文件中查找依赖，所有文件被包含在bundle.js中；

webpack给每个module（注意：所有文件都是module，包括通过loaders进来的图片、css等）一个独立id；并使所有module在bundle.js中可以通过id访问；

启动时，只有entry chunk被执行；

webpack支持CMD和AMD规范，但不要在入口文件中使用AMD规范，会报错；

Development Server:

//Webpack搭建本地服务器，监听文件改变，整个页面实时更新；但是不会输出结果文件到磁盘，适于生产环境下调试；

//webpack-dev-server调用的脚本文件不是output的文件，而是保存在内存中的文件……目前引用的方法只知道用Html-webpack-plugin自动生成html页面来引用；

常用配置：

    plugins : [
        //保证实时更新，需要启用内置的HotModuleReplacementPlugin插件；
        new webpack.HotModuleReplacementPlugin()
    ],
    devServer:{
        //server切换到inline model
        histroyApiFallback : true,
        hot : true,
        inline : true,
        progress : true
    }

注意：webpack-dev-server允许内网访问------设置host 0.0.0.0
//webpack-dev-server是实现页面整体刷新；

//在package.json文件中配置"script"脚本设置快捷命令方式
//以下命令行参数不要和上边webpack.config.js中的配置有交集，好像会报错；
"scripts": {
    "start":"webpack-dev-server --colors --host 0.0.0.0 --port 8080"
  }
  使用命令行模式npm run start运行webpack-dev-server；

使用不同的配置build项目：

    //根据需求绑定不同的配置文件并设置scripts脚本运行方式；
  "scripts": {
    "start": "webpack-dev-server --hot --inline",
    "build": "webpack --progress --colors --config webpack.production.config.js"
  }

本人是初学者，有问题希望大家一起探讨，共同进步，谢谢；

实践是检验真理的唯一标准；可以看着入口文件和webpack.config.js，猜测应该出现的结果，然后再执行一下，检验一下；
推荐一篇文章：