webpack1.x环境配置与打包基础【附带各种 "坑" 与解决方案！持续更新中...】

个人维护的 webpack@latest 多页脚手架2.X已经发布，喜欢请给星，详见： https://github.com/pomelott/webpack-multi-page-cli

首先介绍传统模块化开发的主流方案：

1.基与CMD的sea.js，玉伯提出的解决方案，据说原来京东团队在使用。用时才定义，就近加载。

2.基于AMD的require.js，之前在用。提前声明与定义。国外团队维护。

3.基于commonJS的webpack，当下最流行的，也是大势所趋。基于node环境，功能强大，可扩展性极强。得益于NPM的良好生态、开源社区，扩展项不断增加。国外的同行维护得很给力。

连续研究了几天webpack，掉进很多坑也收获很多，学好之后用起来简直不能再爽，比之前用的require爽的不止一点点。

若未遇到本文提到的“坑”，可直接跳过，不作考虑！

下面正式开始webpack的征程！

1.webpack环境构建

***使用webpack首先要安装node.js环境：

官方下载直接安装即可。

坑一:WIN8下可视化安装node有时会报2502、2503的错误，在此需要提升至管理员权限，并以管理员权限运行cmd，使用msiexec /package 文件名进行安装。

***环境安装完之后可以使用：node -v 和npm -v 测试node环境是否安装成功。若安装成功则继续下载webpack：npm install webpack -g 在此全局安装即可，若需在项目目录下安装，则使用命令：npm install webpack --save-dev.

坑二:安装webpack对node版本要求，卸载之前的node（可在命令行使用where node查看node的本地目录以保证node被完全卸载），安装最新版本即可。

2.项目构建、创建文件

***webpack安装成功后，开始构建项目，首先创建目录：

webpack1.x环境配置与打包基础【附带各种 "坑" 与解决方案！持续更新中...】

项目目录结构非常重要（后面还有坑在等着你），src为开发目录，build为打包目录，以后还有详解。

命令行中进入项目目录:npm init 创建pack.json。

在src目录下创建开发环境目录，如下图所示：

webpack1.x环境配置与打包基础【附带各种 "坑" 与解决方案！持续更新中...】

images-------------------图片模块文件夹（后面会说明图片模块的打包）

index.js-------------------打包的入口文件

common.js-----------------为普通的js模块文件

style.css------------------样式模块文件

index.html文件代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="div1"> 
    </div>
    <script type="text/javascript" src="./bundle.js"></script>></script>
</body>
</html>

***bundle.js为打包后的文件，里面包括所有模块（js/css/图片/字体等）的配置及打包文件。

3.完成js的打包

common.js文件代码如下：

module.exports.doCommon=function(){
    console.log("common is ok !")
}

index.js文件代码如下：

var commonFn=require("./common.js");
commonFn.doCommon();
console.log("index is ok !");

在命令行中进入src目录：webpack index.js bundle.js

在浏览器中查看index.html,打开控制台，效果如下则完成对js的打包：

common is ok !
index is ok !

4.打包css模块

在此需要安装style-loader与css-loader

npm install style-loader css-loader --save-dev

在此打包css有两种方式：

方法（1）在入口文件index.js中直接require样式文件，此方法需要指定加载器：

创建一个style.css文件，随意加些样式，然后在入口文件中引入style.css。index.js文件：

坑三：在此require("style!css!./style.css")也可以，但有时会报错，补全最好;

require("style-loader!css-loader!./style.css");

命令行中运行：

webpack index.js bundle.js

打开index.html，样式已经应用上.

方法（2）在根目录添加webpack.config.js配置文件后直接引入css文件

webpack.config.js文件代码如下：

var path=require("path")
module.exports={
    entry:{
        //入口文件路径，要求为相对路径
        index:["./src/index.js"]
    },
    output:{
        filename:"bundle.js",
        //paht要求为绝对路径，需要引入paht模块调用resolve方法
        path:path.resolve(__dirname,"src/") 
    },
    module:{
        loaders:[
            {
            test: /.css$/,
            loaders: ['style-loader', 'css-loader']
            }
        ]
    }
}

index.js文件代码如下

require("./style.css");
var common=require("./common.js");
common.commonFn();
console.log("index is ok")

修改style.css样式后，重新使用webpack命令，打开index.html，新的样式已经应用上.

5.打包html

接下来使用html-webpack-plugin将开发文件打包至build文件夹下：

首先下载插件：

npm install html-webpack-plugin --save-dev

完了之后重新配置文件：

var path=require("path");
//插件需要引入
var htmlWebpackPlugin=require("html-webpack-plugin");
module.exports={
    entry:{
        //入口文件路径，要求为相对路径
        index:["./src/index.js"]
    },
    output:{
        filename:"bundle.js",
        //paht要求为绝对路径，需要引入paht模块调用resolve方法
        //现在要把输出路径改为构建路径
        path:path.resolve(__dirname,"./build/") 
    },
    module:{
        loaders:[
            {
            test: /.css$/,
            loaders: ['style-loader', 'css-loader']
            }
        ]
    },
    plugins:[new htmlWebpackPlugin({
            title:"firstwebpack",
            template:"./src/index.html",
            filename:"index.html"
        })] 
}

在命令行中输入webpack直接打包至build文件夹下，打开index.html后查看效果，样式已经应用上：

坑四：在此输入webpack命令后可能会报错：“Cannot find module 'webpack/lib/node/NodeTemplatePlugin”，原因是node的安装目录冲突导致系统node的NODE_PATH环境变量配置错误。

解决方案：在命令行中输入：

npm config get piefix

此命令会显示当前系统应用的node路径，按照此路径配置环境变量即可。

6.打包图片文件

坑五：在css中引入图片的大小大于8k时，若没有安装file-loader会报错，原因是大于8k的图片会被webpack当做文件处理，而小于8k的图片会被转为base64编码引入行间以减少http请求；若未下载html-withimg-loader则在html中引入的img标签不会被打包。

需要下载三个加载器：

npm install url-loader file-loader html-withimg-loader --save-dev

配置文件中增加loader的配置选项：

            //用于css中背景图片的加载器
            {
　　　　　　test: /.(png|jpg)$/,
            //limit:图片大小小于8K，会以base64编码图片以减少http请求
            //name：输出子目录构建
　　　　　　loader: 'url-loader?limit=8192&name=./images/[name].[ext]'
　　　　　　},

//用于html中img标签的图片加载器
　　　　　　{
　　　　　　test: /.html$/,
　　　　　　loader: 'html-withimg-loader'
　　　　　　}

最后在html中增加img标签，在css中利用background引入标签，重新运行webpack后即可看到图片被加载出来了。

7.打包jquery

使用jquery需要下载jquery包和expose-loader装载器

npm install jquery expose-loader --save-dev

然后进行装载器配置：

***需配置在所有loader之前，配置文件如下：

var path=require("path");
//插件需要引入
var htmlWebpackPlugin=require("html-webpack-plugin");
module.exports={
    entry:{
        //入口文件路径，要求为相对路径
        index:["./src/index.js"]
    },
    output:{
        filename:"bundle.js",
        //paht要求为绝对路径，需要引入paht模块调用resolve方法
        //现在要把输出路径改为构建路径
        path:path.resolve(__dirname,"./build/") 
    },
    module:{
        loaders:[
            //配置在所有装载器最前面
            { 
                test: require.resolve("jquery"), 
                loader: "expose-loader?$" 
            },
            {
            test: /.css$/,
            loaders: ['style-loader', 'css-loader']
            },
            {
　　　　　　test: /.(png|jpg)$/,
            //limit:图片大小小于8K，会以base64编码图片以减少http请求
            //name：输出子目录构建
　　　　　　loader: 'url-loader?limit=8192&name=./images/[name].[ext]'
　　　　　　},
　　　　　　{
　　　　　　test: /.html$/,
　　　　　　loader: 'html-withimg-loader'
　　　　　　}
        ]
    },
    plugins:[new htmlWebpackPlugin({
            title:"firstwebpack",
            template:"./src/index.html",
            filename:"index.html"
        })] 
}

在index.js中引入jquery

//index.js


require("./style.css");
//引入jquery并指定装载器为expose-loader
require("expose-loader?$!jquery");
var commonFn=require("./common.js");
commonFn.doCommon();
console.log("index is ok !")

$("#div1").css({"border":"10px solid #f00"})

重新webpack后打开index.html，未报错，样式已经应用上。

至此，基础的webpack打包已经完成，后续的进阶打包会持续更新.....

完全原创，喜欢请点击右下角推荐，未经允许禁止转载。

webpack1.x环境配置与打包基础【附带各种 "坑" 与解决方案！持续更新中...】

相关推荐