webpack打包vue文件
1,下载依赖
npm i vue-loadernpm i webpack-cli
2，编写webpack配置文件
/*** 关于webpack的配置文件*/const path = require('path')const {VueLoaderPlugin } = require('vue-loader')const glob = require('glob') // node自带的读取文件的库/*** 配置entry的对象，将所有的组件都按照一定格式放在对象中* 主要的格式是 components/lib/card,components/lib/demo* 由于之后可能会添加其他的组件，所以使用动态引入的方式来进行引入*/const entryList = {}, dirPath = 'components/lib'makeEntryList(dirPath,entryList)async function makeEntryList(dirPath, entryList){const files = glob.sync(`${dirPath}/**/index.js`)for(file of files){const component = file.split(/[/.]/)[2]entryList[component] = `./${file}`}}/*** webpack的配置部分*/module.exports = {entry: entryList,mode: 'development',output: {filename: '[name].umd.js',path: path.resolve(__dirname,'dist'),library: 'umi',libraryTarget: 'umd'},plugins: [new VueLoaderPlugin()],module: {rules: [ // 告诉webpack 什么样的文件使用哪个loader{test: /\.vue$/,use: [{loader: 'vue-loader'}]}]}}
3，修改命令
package.json文件中添加
"build:js": "webpack --config ./ponent.js",
4，测试
npm run build:js
出现dist文件，就算打包成功
5， 出现的问题
用npm安装vue-loader，webpack-cli的时候，显示版本不统一的错误，所以在安装的时候，最好看一下对应的版本。
使用cnpm进行安装错误会少一些。
gulp打包sass文件/css文件
1，安装环境
cnpm i gulp -Dcnpm i sass -Dcnpm i gulp-sass -Dcnpm i gulp-minify-css -D
2,创建一个gulp配置文件 gulpfile.js
const gulp = require('gulp')const sass = require('gulp-sass')(require('sass')) //sass文件转换成css文件const minifyCss = require('gulp-minify-css') // 用来压缩css文件的// 使用gulp去创建流水线任务, 分别是执行sass转换成css， 压缩css文件， 输出到dist/css文件夹下gulp.task('sass',async function(){return gulp.src('components/css/**/*.scss').pipe(sass()).pipe(minifyCss()).pipe(gulp.dest('dist/css'))})
3, 配置命令
"build:css": "npx gulp sass"
4， 测试
npm run build:css
出现下面css文件以及下面的css文件即可
6，出现的问题
1， 在打包css文件的时候，出现
Error in plugin “gulp-sass”
Message:
gulp-sass no longer has a default Sass compiler; please set one yourself.
Both the “sass” and “node-sass” packages are permitted.
For example, in your gulpfile:
解决办法：
安装一下sass， 命令：cnpm i sass gulp-sass
2, TypeError: sass is not a function
解决办法：
安装一下sass
命令： cnpm i sass gulp-sass
在引入的时候，写成下面的形式：
const sass = require(‘gulp-sass’)(require(‘sass’)) //sass文件转换成css文件
开源地址
gitlab地址
如果觉得《webpack打包vue文件+gulp打包sass文件》对你有帮助，请点赞、收藏，并留下你的观点哦！
