1.webpack
![]()
导出图片Thu Jul 19 2018 23_43_30 GMT-0400 (北美东部夏令时间).png
导出图片Thu Jul 19 2018 23_43_30 GMT-0400 (北美东部夏令时间).png
从 webpack v4.0.0 开始，可以不用引入一个配置文件。然而，webpack 仍然还是高度可配置的。在开始前你需要先理解四个核心概念：
*入口(entry)
*输出(output)
*loader
*插件(plugins)
每个核心概念的高度概述请参考webpack官网，地址：https://www.webpackjs.com/concepts/
demo核心代码：
const path = require('path');
var webpack = require("webpack");
const config = {
entry: {
main: './src/index.js'
},
output: {
filename: '[name]-[hash:8].js',
path: path.join(__dirname, 'dist'),
},
module: {
rules: [
{
test: /\.html/, use: ['html-loader']
}
]
},
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: __dirname + '/index.html'
})
]
}
module.exports = config;
2.gulp
- 全局安装 gulp：
$ npm install --global gulp - 作为项目的开发依赖（devDependencies）安装：
$ npm install --save-dev gulp - 在项目根目录下创建一个名为 gulpfile.js 的文件：
var gulp = require('gulp');
gulp.task('default', function() {
// 将你的默认的任务代码放在这
});
- 运行 gulp：
$ gulp
demo:
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('hello', function() {
// 将你的默认的任务代码放在这
console.log('hello world!');
});
gulp.task('sass',function(){
return gulp.src('src/main/webapp/static/styles/scss/apply.scss')
.pipe(sass())
.pipe(gulp.dest('src/main/webapp/static/styles/css'))
});
gulp VS webpack:
1.Gulp侧重于前端开发的 整个过程 的控制管理（像是流水线），我们可以通过给gulp配置不通的task（通过Gulp中的gulp.task()方法配置，比如启动server、sass/less预编译、文件的合并压缩等等）来让gulp实现不同的功能，从而构建整个前端开发流程。
2.Webpack有人也称之为 模块打包机 ，由此也可以看出Webpack更侧重于模块打包，当然我们可以把开发中的所有资源（图片、js文件、css文件等）都可以看成模块，最初Webpack本身就是为前端JS代码打包而设计的，后来被扩展到其他资源的打包处理。Webpack是通过loader（加载器）和plugins（插件）对资源进行处理的。
3.另外我们知道Gulp是对整个过程进行控制，所以在其配置文件（gulpfile.js）中配置的每一个task对项目中 该task配置路径下所有的资源 都可以管理。比如，对sass文件进行预编译的task可以对其配置路径下的所有sass文件进行预编译处理：
