Open hxkuc opened 6 years ago
打包的时候每次都在cli下写一大堆代码,特别不方便,我们可以使用webpack.conf.js的配置文件来简化打包代码,webpack.conf.js默认保存在项目根目录下,然后在根目录下执行webpack命令,webpack就会自动根据webpack.conf.js的配置进行打包,接下来在根目录新建一个webpack.config.js,内容如下
webpack
module.exports = { mode: 'development', module: { rules: [ { test: /\.vue$/, use: { loader: 'vue-loader' } } ] }, resolve: { alias: { 'vue': 'vue/dist/vue.js' } } }
然后执行如下命令 打包成功! 此时打包出来的main.js大小为341kb(包含vue.js的代码)
接下来我们再引入elementui样式 首先安装element执行npm install --save element-ui 然后src/index.js改为如下代码
npm install --save element-ui
import Vue from 'vue' import App from './app.vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) new Vue({ el: '#app', template: '<App/>', components: { App } })
src/app.vue里面随便加一个elementui按钮的代码如下 <el-button type="success" icon="el-icon-check" circle></el-button> 接着打包会发现报错。。。
<el-button type="success" icon="el-icon-check" circle></el-button>
因为在这里我们用import引入了css文件,所以我们要配置解析css的两个loader css-loader和style-loader,css-loader是解析引入的css文件用的,style-loader是把解析后的css样式以的形式插入到页面上去的,因此这两个的摆放顺序不能颠倒,webpack是从右向左执行的所以应该把css-loader放后面,我们先安装 npm i -D style-loader css-loader,然后webpack.config.js加入如下的loader解析
npm i -D style-loader css-loader
{ test: /\.css$/, use: ['style-loader', 'css-loader'] }
接着打包,依然报错如下 仔细看这是因为css中引用的矢量字体导致,我们还要安装解释字体的loader
处理图片和字体等资源有两种loader,url-loader和file-loader,二者关系是url-loader包含file-loader,使用file-loader会把文件单独打包出来脱离js文件,url-loader有个limit参数,小于limit的时候会直接把静态资源也打包进js文件中,大于limit的时候就调用file-loader单独打包出来。我们先用url-loader测试 还是先安装 npm i -D url-loader webpack.config.js配置文件中加入如下代码
npm i -D url-loader
{ test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, use: { loader: 'url-loader', } }
打包成功我们发现main.js有2062kb,打开main.js我们会发现,elementui的所有css代码和字体图标都打包到了main.js文件中了
打包的时候每次都在cli下写一大堆代码,特别不方便,我们可以使用webpack.conf.js的配置文件来简化打包代码,webpack.conf.js默认保存在项目根目录下,然后在根目录下执行
webpack
命令,webpack就会自动根据webpack.conf.js的配置进行打包,接下来在根目录新建一个webpack.config.js,内容如下然后执行如下命令
打包成功!
此时打包出来的main.js大小为341kb(包含vue.js的代码)
引入elementui样式
接下来我们再引入elementui样式 首先安装element执行
npm install --save element-ui
然后src/index.js改为如下代码src/app.vue里面随便加一个elementui按钮的代码如下
<el-button type="success" icon="el-icon-check" circle></el-button>
接着打包会发现报错。。。css-loader和style-loader
因为在这里我们用import引入了css文件,所以我们要配置解析css的两个loader css-loader和style-loader,css-loader是解析引入的css文件用的,style-loader是把解析后的css样式以的形式插入到页面上去的,因此这两个的摆放顺序不能颠倒,webpack是从右向左执行的所以应该把css-loader放后面,我们先安装
npm i -D style-loader css-loader
,然后webpack.config.js加入如下的loader解析接着打包,依然报错如下
仔细看这是因为css中引用的矢量字体导致,我们还要安装解释字体的loader
url-loader和file-loader
处理图片和字体等资源有两种loader,url-loader和file-loader,二者关系是url-loader包含file-loader,使用file-loader会把文件单独打包出来脱离js文件,url-loader有个limit参数,小于limit的时候会直接把静态资源也打包进js文件中,大于limit的时候就调用file-loader单独打包出来。我们先用url-loader测试 还是先安装
npm i -D url-loader
webpack.config.js配置文件中加入如下代码打包成功我们发现main.js有2062kb,打开main.js我们会发现,elementui的所有css代码和字体图标都打包到了main.js文件中了