模块打包工具webpack

时间:2021-09-17 18:37:46

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了。