模块打包工具webpack

1.webpack的安装

1.1在安装node的基础上，npm install -g webpack(window版本，因为是全局安装，所以无所谓是哪个路径下)

1.2新建一个文件夹用于此项目 eg:D盘新建一个mywebpack文件夹

1.3找到这个文件夹，npm init 完成之后在mywebpack文件夹中出现一个package.json文件，文件中是刚执行的操作内容

1.4在mypack文件中新建一个index.html，引入一个bundle.js(注意：这时bundle.js是没有的)，再新建一个app.js，app.js中写入操作。要达到的目的是引用bundle.js一个js文件可以用到app.js或更多js的功能。

代码：

app.js中：

alert("我是app.js")

然后运行：在同等目录下执行webpack app.js bundle.js 这时，运行index.html会出现app.js里面的内容，文件夹中会自动创建bundle.js

1.4.1 如果想要bundle.js用到app.js以及其他js的内容可以这样做。

新建people.js

//字符串形式
module.exports="我是people.jshhh";  
//函数形式
function getinfo(){     //函数
    return "我是函数";
} 
module.exports=getinfo();    //getinfo()对外公开
//数组、对象形式
let people=[
    {name:"hanna"},
    {name:"xumin"}
]
module.exports=people;

app.js中

//需要用require注入，需要注意的是require后面，如果是自己写的js，就算是同级目录也需要写./   如果是引入的库什么的不需要写./
var people=require("./people.js");
console.log(people[0].name);

当然每次修改了需要执行一次：webpack app.js bundle.js 如果想要每修改一次自动监听，执行一次webpack app.js bundle.js --watch 就可以了

2.webpack-运用第三方库

2.1 使用第三方库（jquery）

对应文件夹下 npm install iquery --save

//测试是否引用了jquery
let $=require("jquery");
$.each(people,function(key,value){
    $("body").append("<h3>"+people[key].name+"</h3>")
});

2.2 模块化静态文件（css）

要安装css-loader 做法是在当前目录执行 npm install css-loader style-loader --save-dev

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

2.3 使用配置文件webpack.config.js (当需要有多个css文件引入时，需要用到webpack.config.js)

做法：（1）在mywebpack文件夹下面新建webpack.config.js（名称一定是这个）

（2）在webpack.config.js中写

module.exports={
    //入口文件
    entry:"./app.js",
    //出口文件
    output:{
        path:__dirname,       //当前路径
        filename:"bundle.js"
    },
    //需要依赖的插件或者装载器
    module:{
        loaders:[
            {test:/\.css$/,loader:"style-loader!css-loader"}
        ]
    }
}

然后app.js中需要修改：

有原来的require("!style-loader!css-loader!./index.css")

修改为：require("./index.css");

重新执行webpack app.js bundle.js --watch就可以啦

优化一下：

mywebpack下面创建src文件夹(js文件夹、css文件夹)，可以把之前的app.js、people.js放入src下面的js文件夹中，其中对应的文件路径对应修改一下，可以删掉bundle.js文件，重新生成一下：

webpack.config.js中变化：

module.exports={
    //入口文件
    entry:"./src/js/app.js",
    //出口文件
    output:{
        path:__dirname+"/dist",
        filename:"bundle.js"       //在当前路径下创建dist文件夹，在dist文件夹下面创建bundle.js
    },
    //需要依赖的插件或者装载器
    module:{
        loaders:[
            {test:/\.css$/,loader:"style-loader!css-loader"}
        ]
    }
}

修改其他文件对应的文件时，在当前文件下执行webpack就可以，不再是webpack app.js bundle.js --watch 因为路径发生了变化，执行webpack可以找到webpack.config.js，即一切顺理成章。

再优化：可以在package.json文件夹中修改

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
},

为

 "scripts": {
    "build":"webpack"
  },

这样在当前文件夹下面只需要执行npm run build就可以不需要是webpack

2.4 使用webpack-dev-server

2.4.1 使用webpack-dev-server（可以搭建服务器，实时监听）

其好处是可以将自己的项目在本地的服务器中去运行

(1)首先安装

npm install -g webpack-dev-server --save-dev

(2)在package.json中修改添加start

"scripts": {
      "start":"webpack-dev-server --entry .src/js/app.js --output-filename ./dist/bundle.js",
    "build":"webpack"
  },

在当前文件夹下面执行 npm run build创建完项目，npm start 可以利用本地的服务器来监听做错

2.4.2 使用babel转换插件(可以将es6语法转换成es5语法,)

(1)安装babel

npm install babel-core babel-loader babel-preset-es2015 --save-dev (这里-es2015是你想要转换成的语言，这里是es5，babel-core是核心插件， babel-loader是装载器)

(2)在webpack.config.js中配置

module:{
        loaders:[
            {test:/\.css$/,loader:"style-loader!css-loader"},
            {
                test:/\.js$/,loader:"babel-loader",
                exclude:/node_modules/,    //除了这个文件
                query:{                    //查询
                    preset:["es2015"]
                }
            }
        ]
    }

(3)重构项目 npm run build

(4)npm start 运行

(5)可以在bundle.js中看到已经将app.js中使用的es6语法修改为es5了。

秒客网

模块打包工具webpack

相关文章