webpack打包vue文件+gulp打包sass文件

webpack打包vue文件

1,下载依赖

npm i vue-loader
npm i webpack-cli
1
2

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'
                         }
                    ]
               }
          ]
     }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

3，修改命令

package.json文件中添加

"build:js": "webpack --config ./webpack.component.js",
1

4，测试

npm run build:js
1

出现dist文件，就算打包成功

5， 出现的问题

用npm安装vue-loader，webpack-cli的时候，显示版本不统一的错误，所以在安装的时候，最好看一下对应的版本。

使用cnpm进行安装错误会少一些。

gulp打包sass文件/css文件

1，安装环境

cnpm i gulp -D
cnpm i sass -D
cnpm i gulp-sass -D
cnpm i gulp-minify-css -D
1
2
3
4

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'))
})
1
2
3
4
5
6
7
8
9
10
11

3, 配置命令

"build:css": "npx gulp sass"
1

4， 测试

npm run build:css
1

出现下面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地址