Vue—07—模块化高级之webpack;


 

 一. webpack基本使用

 webpack是一个前端模块化打包工具;

我们在node环境中, 安装了webpack包之后, 只需要新建一个main.js文件, 然后在这个文件和其他文件可以使用任何模块化规范(commonjs\amd\cmd\ed6都行)开发,   最后打包的时候只需要打包这个main.js文件, 其他js文件webpack会自动帮助我们打包的, 代码如下:

webpack  ./src/main.js  ./dist/buddle.js

 

 然后在index.html中引入./dist/buddle.js即可;

Vue—07—模块化高级之webpack;

 

 二. webpack自定义快捷键

1. webpack

刚刚我们使用webpack ./src/main.js ./dist/buddle.js命令很麻烦啊, 能不能简单点, 可以,  就是自定义一个和src同级的webpack.config.js文件, 在这个文件里定义每次打包的入口文件和出口文件, 如图:

Vue—07—模块化高级之webpack;

 

 其中, output的path属性需要绝对路径, 所以, 需要使用导入node环境自带的path模块,  然后使用__dirname变量取得绝对路径;

如此, 便可以直接在终端中使用webpack命令打包了;

2. npm run build

还可以在packgae.json的scripts属性中定义build脚本, 这样,我们只要使用npm  run  build命令,  node便会自动去找build脚本的内容并执行;

Vue—07—模块化高级之webpack;

 

 

 

三‘  lorder

webpack如何处理除了js问价外的一些特殊文件呢?比如说css文件或者jpg文件?

Vue—07—模块化高级之webpack;

 

 1.处理css文件

先使用npm安装两个依赖

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

 

然后在webpack.config.js文件中配置,

Vue—07—模块化高级之webpack;

 

2.加载less文件

3.加载图片文件

使用url-lorder

Vue—07—模块化高级之webpack;

 

如果图片的大小超过了limit的限制13000kb, 所以可以要再安装一个file-lorder模块;

然后图片打包后它的路径是不对的, 需要配置一下, 我们可以在webpack.config.js中配置;

Vue—07—模块化高级之webpack;

 

打包后的图片名称长度太长了, 可以通过在webpack.config.js文件配置name属性来设置;

 Vue—07—模块化高级之webpack;

 

 4.es6语法转化为es5语法

Vue—07—模块化高级之webpack;

 

Vue—07—模块化高级之webpack;

上一篇:Kubernetes 基本命令


下一篇:修改Kubernetes主节点(控制节点)名称