webpack安装与使用_cpnm 安装webback-CSDN博客

webpack介绍：

WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。webpack主要是针对打包整合开发文件，在系统运行的时候，需要进行统一打包成运行版本的工具。

开发时候，通常会将业务部分(main.js)和逻辑运算部分(calc.js)分开编写，实现明确的分工。此时两个部分分别写好之后，就可以用webpack进行打包。

一、先上node.js上下载node.js稳定版

二、一路next安装好node.js之后是这样子的（记得路径根据自己的需要来配置好）

三、window+R进入cmd命令行

输入命令：npm -v 查看版本号，看是否安装成功

可以使用 npm config ls 来查看node全局安装的路径

四、安装nrm

输入命令npm install nrm -g 全局安装nrm

注意： nrm 只是单纯的提供了几个常用的下载包的 URL地址，并能够让我们在这几个地址之间，很方便的进行切换，但是，我们每次装包的时候，使用的装包工具，都是npm

五、nrm命令：

① nrm ls　　// 查看所有的支持源（有*号的表示当前所使用的源,以下[name]表示源的名称）
② nrm use [name]　　// 将npm下载源切换成指定的源
③ nrm help　　// 查看nrm帮助

④ nrm home [name]　　// 跳转到指定源的官网

六、安装webpack

输入命令：npm install webpack@1.14.0 -g （我这里安装的是1.14.0版本的webpack）

如直接使用 npm i webpack -g 来安装，安装的版本将是最新版本。

查看安装版本：webpack -v

全局卸载：npm uninstall webpack -g

到此webpack安装成功

注意：本人此处安装的低版本webpack，高版本的webpack命令有所变化，使用者请留意。

在webstorm中打包：

执行 npm init -y ，初始化出一个名为package.json的文件。
执行 webpack 【要打包的文件】【打包好的文件要去的位置】
例如：webpack ./src/main.js ./dist/bundle.js
注意： 4.0以上的打包命令为：webpack【要打包的文件】 -o【打包好的文件要去的位置】 --mode development

七·、webpack命令

进入到要打包的文件夹的底下，shift+鼠标右键，进入到命令行

打包命令：webpack 入口文件.js 输出文件.js

打包成功（打包只需要打包一个js文件，webpack会将整个js文件所关联的其他js文件一起打包）

八、webpack配置文件的使用（webpack.config.js）

作用：可以将入口文件和输出文件的路径、文件名都配置起来，使将来在命令行面板中，输入webpack就可以实现打包，使命令在使用过程中变得更简单

通常，一个项目的结构会分为开发代码和打包以后的生成代码，开发的代码通常放在src文件夹中，打包以后生成代码通常放在dist文件夹张，如下图

所以calc.js与main.js这两个开发文件应该放入src文件夹中，之后在跟目录下创建webpack.config.js文件

webpack.config.js文件里面的内容：


 
 
   
   
    
    
   
   
   
   
    
    
     
     module.exports={
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
         entry:'./src/main.js',  //指定打包的入口文件
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
         output:{
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
             path: __dirname +'/dist',  //注意：webpack1.14.0 要求这个路径是一个绝对路径
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
             filename:'build.js'   //输出的打包文件的文件名
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
         }
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     }

然后在根目录打开cmd命令窗口，输入webpack，打包成功！

九、webpack实现css打包

webpack本身不支持css、less、sass、js、image等相关资源的打包工作，是借助于loader才实现资源的打包

webpack中使用css-loader和style-loader两个loader来处理css资源打包工作

用npm来安装css-loader和style-loader

首先：①在根目录下运行cmd命令：npm init

（如果运行过程中发生错误，尝试更新npm的版本：npm install npm -g）

②在根目录下就会生成一个package.json文件，然后执行命令：npm install css-loader style-loader --save-dev

安装成功后，会发现package.json中添加了这两个包的版本号，便于他人掌握项目所依赖的包，他人拿到package.json之后，只需要执行命令npm install就可以自动下载所依赖的包

③接下来开始打包css文件，打包到build.js当中

配置webpack.config.js文件：（加入module）


 
 
   
   
    
    
   
   
   
   
    
    
     
     module.exports={
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
         entry:'./src/main.js',  //指定打包的入口文件
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
         output:{
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
             path: __dirname +'/dist',  //注意：webpack1.14.0 要求这个路径是一个绝对路径
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
             filename:'build.js'   //输出的打包文件的文件名
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
         },
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
         module:{
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
             loaders:[
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                 {
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                     test:/\.css$/,
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                     loader:'style-loader!css-loader'
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                 }
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
             ]
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
         }
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     }

现在可以看到，css文件并不在main.js文件中有所使用，所以要去改main.js文件，才能被打包

在main.js文件中加入：


 
 
   
   
    
    
   
   
   
   
    
    
     
     //2.0导入site.css文件
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     require('../statics/css/site.css');

然后在在根目录输入命令:webpack

进行打包，至此，CSS文件打包成功！

十、webpack打包scss文件（打包scss文件需要依赖①css-loader ②style-loader ③sass-loader ④node-sass（这个包为sass-loader所依赖的））

改造main.js导入sass文件


 
 
   
   
    
    
   
   
   
   
    
    
     
     //导入sass文件
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     require('../statics/css/site1.scss');

然后在webpack.config.js中配置scss的loader：


 
 
   
   
    
    
   
   
   
   
    
    
     
     module.exports={
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
         entry:'./src/main.js',  //指定打包的入口文件
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
         output:{
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
             path: __dirname +'/dist',  //注意：webpack1.14.0 要求这个路径是一个绝对路径
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
             filename:'build.js'   //输出的打包文件的文件名
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
         },
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
         module:{
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
             loaders:[
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                 {
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                     test:/\.css$/,  //打包 .css文件
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                     loader:'style-loader!css-loader'
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                 },
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                 {
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                     test:/\.scss$/,   //打包 .scss文件
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                     loader:'style-loader!css-loader!sass-loader'
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                 }
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
             ]
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
         }
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     };

此时还没有sass-loader和node-sass这个包，需要用npm来下载这个包，如果已经安装有css-loader和style-loader的，为了防止报错，也要重新再安装一次，执行命令：npm install node-sass sass-loader css-loader style-loader

此时，用npm下载是会被墙的，所以不能用npm来下载了，用淘宝的cnpm，先安装cnpm，执行命令：npm install cnpm -g

再用cnpm来安装，执行命令：cnpm install node-sass sass-loader css-loader style-loader --save-dev

安装成功之后，执行打包：webpack

十一、webpack进行less文件打包

实现less文件打包所依赖的包有：①css-loader ②style-loader ③less-loader ④less（less-loader的依赖包）

用cnpm安装所有的包：cnpm install less less-loader style-loader css-loader --save-dev

在webpack.config.js中配置less的loader中增加：


 
 
   
   
    
    
   
   
   
   
    
    
     
     {
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                     test:/\.less$/,   //打包 .less文件
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                     loader:'style-loader!css-loader!less-loader'
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                 }

在main.js中引用less文件


 
 
   
   
    
    
   
   
   
   
    
    
     
     //4.0 导入site2.less文件
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     require('../statics/css/site2.less');

接下来执行webpack打包

此时如果报错Module not found: Error: Cannot resolve module '****'的话，可以先删除node_modules文件夹，然后通过cnpm install命令重新下载所有的包，下载完所有的包之后，再重新打包。

十二、webpack实现url请求资源的打包

比如说，在css文件当中设置背景图片：background-images：url(../imgs/home.png)

对这种背景图片的打包就是实现对url请求资源的打包

打包url()请求的资源需要安装的node包有：①url-loader ②file-loader（url-loader依赖的loader）

先执行命令安装这两个包：cnpm install url-loader file-loader --save-dev

安装成功之后，在webpack.config.js中配置这个loader


 
 
   
   
    
    
   
   
   
   
    
    
     
     {
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                     test:/\.(png|jpg|gif)$/,   //打包 url请求的资源文件
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                     loader:'url-loader?limit=200000'  //limit表示显示限制 图片的大小为200K是临界值，小于200K的图片均被打包到build.js中去，请求图片就会很快
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                 }

然后进行打包：webpack，同上，如果出现报错的话删了node_modules再重新下载所有的包

这就打包完成了！

此时，如果图片大于200K，webpack会自动将图片拷贝一份放到build.js同目录下，但是此时页面上是无法显示这个图片的，必须要用服务器才能够显示得出来。

十二、webpack-dev-server实现热加载和热刷新

当我们修改了代码之后需要不断的重新执行webpack命令重新打包然后回到浏览器刷新页面去查看，这种开发效率低下，所以使用webpack-dev-server当代码更新的时候自动重新打包和刷新浏览器。

需要安装的包有：①webpack ②webpack-dev-server ③html-webpack-plugin

输入命令：cnpm install webpack webpack-dev-server html-webpack-plugin --save-devc（真的建议全程都用cpnm下载吧，npm各种被墙，是在是用不下去了）

①在package.json文件中配置webpack-dev-server命令：


 
 
   
   
    
    
   
   
   
   
    
    
     
     "scripts": {
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
         "dev": "webpack-dev-server --inline --hot --open --port 5008"
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
       }

参数说明：--inline:自动刷新

--hot:热加载

--port:指定监听端口为5200

-- open:自动在默认浏览器中打开

--host:可以指定服务器的ip，不指定默认为127.0.0.1（localhost）

②在webpack.config.js中配置html-webpack-plugin:

在webpack.config.js的开头添加：

var htmlwp = require("html-webpack-plugin");

在module中添加（与loader同级）：


 
 
   
   
    
    
   
   
   
   
    
    
     
     plugins:[
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
             new htmlwp({
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                 title:'首页', //生成的页面标题
     
     <head>
     
     <title>首页
     
     </title>
     
     </head>
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                 filename:'index.html', //webpack-dev-server在内存中生成的文件名称
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                 template:'index1.html' //根据index1.html这个模板来生成
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
             })
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
         ]

③在cmd命令行中运行server：npm run dev

此时热刷新和热加载就能够完成了！而且引入的img文件也能够用了

webpack-dev-server在配置过程中会产生很多版本上的不兼容的问题，导致很多报错，我列举有其中一个报错的原因，请参考我的另一篇blog：npm run dev出现错误：Module build failed: TypeError: fileSystem.statSync is not a function解决方案

十三、使用webpack实现ES6语法转换为ES5语法

目前浏览器对于ES6的语法并不是100%支持，而对于ES5语法则是100%支持的，目前vue使用的是ES6语法

所要依赖的包有：①babel-core ②babel-loader ③babel-preset-es2015

④babel-plugin-transform-runtime(这个包主要是在打包.vue组件页面中的es6语法需要)

老规矩:cnpm install babel-core babel-loader babel-preset-es2015 babel-plugin-transform-runtime --save-dev

接着，在webpack.config.js中配置这个loader


 
 
   
   
    
    
   
   
   
   
    
    
     
     module.exports={
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
         entry:'./src/main.js',  //指定打包的入口文件
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
         output:{
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
             path: __dirname +'/dist',  //注意：webpack1.14.0 要求这个路径是一个绝对路径
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
             filename:'build.js'   //输出的打包文件的文件名
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
         },
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
         module:{
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
             loaders:[
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                 .....,
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                 {
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                     test:/\.js/,   //将.js文件中的es6语法转成es5语法
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                     loader:'babel-loader',
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                     exclude:/node_modules/
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                 }
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
             ]
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
         },
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
         babel:{
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
             presets:['es2015'],  //配置将es6语法转换成es5语法
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
             plugins:['transform-runtime']  //这句代码就是为了解决打包.vue文件不报错
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
         },
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
         ...
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     };

然后打开服务器npm run dev

十四、利用webpack解析和打包 .vue组件页面

Vue项目中的每个页面都是一个.vue文件，这种文件，Vue称之为组件页面。必须借助于webpack的vue-loader才能够解析

所依赖的包有：①vue :vuejs核心包

②vue-loader :vue文件编译loader

③vue-template-compiler : vue模板编译，被vue-loader所依赖

④babel-plugin-transform-runtime : es6实时转换成es5语法

安装上述的包：注意vue包保存的位置和其余三个包不一样,但用npm install 都可以下载

cnpm install vue-loader vue-template-compiler babel-plugin-transform-runtime --save-dev

cnpm install vue --save

然后在webpack.config.js中添加以下配置：


 
 
   
   
    
    
   
   
   
   
    
    
     
     babel:{
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
             presets:['es2015'],  //配置将es6语法转换成es5语法
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
             plugins:['transform-runtime']  //这句代码就是为了解决打包.vue文件不报错
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
         },

再配置一个loader：


 
 
   
   
    
    
   
   
   
   
    
    
     
     {
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                     test:/\.vue$/,   //解析.vue组件页面文件
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                     loader:'vue-loader',
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                 }

十五、实现vue-router控制模块的集成

1.安装vue-router：cnpm install vue-router --save

2.在webpack打包入口js文件中（entry指定的那个文件main.js）配置如下：


 
 
   
   
    
    
   
   
   
   
    
    
     
     //3.0将vue-router集成到这个项目中来
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     import vueRouter from 'vue-router';
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     //3.0.1 将VueRouter对象绑定到Vue对象上
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     Vue.use(vueRouter);
    
    
   
   

   
   
    
    
   
   
   
   
    
     
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     //3.0.2导入路由规则对应的组件对象
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     import login from './components/account/login.vue'
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     import register from './components/account/register.vue'
    
    
   
   

   
   
    
    
   
   
   
   
    
     
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     //3.0.2 定义路由规则
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     var router = new vueRouter({
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
         routes:[
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
         {path:'/login',component:login},
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
         {path:'/register',,component:register}
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     ]});
    
    
   
   

   
   
    
    
   
   
   
   
    
     
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     //3.0 利用Vue对象进行解析渲染
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     new Vue({
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
         el:'#app',
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
         // render:function (create) {
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
         //     create(App)
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
         // }   //es5的写法
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
         //使用路由对象实例
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
         router
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     });