1.webpack
![]()
導(dǎo)出圖片Thu Jul 19 2018 23_43_30 GMT-0400 (北美東部夏令時(shí)間).png
從 webpack v4.0.0 開始鬼譬，可以不用引入一個(gè)配置文件。然而扩借，webpack 仍然還是高度可配置的族奢。在開始前你需要先理解四個(gè)核心概念：
*入口(entry)
*輸出(output)
*loader
*插件(plugins)
每個(gè)核心概念的高度概述請(qǐng)參考webpack官網(wǎng)，地址：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 - 作為項(xiàng)目的開發(fā)依賴（devDependencies）安裝：
$ npm install --save-dev gulp - 在項(xiàng)目根目錄下創(chuàng)建一個(gè)名為 gulpfile.js 的文件：
var gulp = require('gulp');
gulp.task('default', function() {
// 將你的默認(rèn)的任務(wù)代碼放在這
});
- 運(yùn)行 gulp：
$ gulp
demo:
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('hello', function() {
// 將你的默認(rèn)的任務(wù)代碼放在這
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側(cè)重于前端開發(fā)的 整個(gè)過程 的控制管理（像是流水線）麻蹋，我們可以通過給gulp配置不通的task（通過Gulp中的gulp.task()方法配置韩肝，比如啟動(dòng)server、sass/less預(yù)編譯祸轮、文件的合并壓縮等等）來(lái)讓gulp實(shí)現(xiàn)不同的功能兽埃，從而構(gòu)建整個(gè)前端開發(fā)流程。
2.Webpack有人也稱之為 模塊打包機(jī) 适袜，由此也可以看出Webpack更側(cè)重于模塊打包柄错，當(dāng)然我們可以把開發(fā)中的所有資源（圖片、js文件苦酱、css文件等）都可以看成模塊售貌，最初Webpack本身就是為前端JS代碼打包而設(shè)計(jì)的，后來(lái)被擴(kuò)展到其他資源的打包處理躏啰。Webpack是通過loader（加載器）和plugins（插件）對(duì)資源進(jìn)行處理的趁矾。
3.另外我們知道Gulp是對(duì)整個(gè)過程進(jìn)行控制，所以在其配置文件（gulpfile.js）中配置的每一個(gè)task對(duì)項(xiàng)目中 該task配置路徑下所有的資源 都可以管理给僵。比如毫捣，對(duì)sass文件進(jìn)行預(yù)編譯的task可以對(duì)其配置路徑下的所有sass文件進(jìn)行預(yù)編譯處理：
