webpack安装及问题解决

注：有写的不对或者补充的地方欢迎提出。

 

webpack安装

首先安装webpack需要安装Node.js ，因为Node.js包好NPM软件包管理器

用npm 安装webpack

npm install webpack -g

-g为gulp全局环境，可用webpack -h查看命令　　使用webpack -v查看版本号

通常我们会将webpack安装到项目依赖

　　进入项目目录，确定已经生成package.json，如果没有就在项目下执行npm init 命令.

 

确认有package.json后执行下面命令，添加项目依赖。

 

npm install webpack --save

如果使用webpack开发则需要安装webpack开发的一个服务器。依然是全局安装

npm install webpack-dev-server -g

添加项目依赖

npm install webpack-dev-server --save

添加项目依赖后会在package.json文件里面自动写入相关依赖

 如果不报Error或者红则没有问题。

检测是否安装可以用

webpack-dev-server -v

Windows输入此命令会返回两个版本号

如果只显示一个版本号的话，可以使用

webpack -v

验证webpack版本

 webpack与webpack-dev-server安装成功后，进入项目目录

webpack需要配置文件webpack.config.js

var webpack = require('webpack');
var path = require('path');

module.exports = {
    context:__dirname + '/src',
    entry:"./js/index.js",
    module:{
        loaders:[{
            test:/\.js?$/,
            exclude:/(node-modules)/,
            loader:'babel-loader',
            query:{
                presets:['react','es2015']
            }
        }]
    },
    output:{
        path:__dirname + "/src/",
        filename:"bundle.js"
    }
};

然后执行打包，：

webpack

确认下 babel-loader babel-core babel-preset-es2015    是否安装，如果没有安装会提示报错的。

都可以使用npm包管理安装，在此不细说。

 

webpack常用的命令

webpack --watch   //监听变动并自动打包

 

 

webpack安装遇到问题及解决：

 

待补充ing

有遇到问题或者提出问题共同解决。我好加以补充。