webpack基础用法

来源：互联网发布：免费淘宝装修软件编辑：程序博客网时间：2024/05/21 04:19

米花儿团儿 2016年04月22日发布

0 推荐
13 收藏，1.1k 浏览

----------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 HtmlWebpackPlugin = require('html-webpack-plugin');    var webpack = require('webpack');        //定义常用路径变量；    var ROOT_PATH = path.resolve(__dirname);    //返回当前文件（webpack.config.js）所在位置    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 : {            一切皆模块，一切需要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"  }

0 0