http://www.web008.net

美高梅手机版webpack搭建vue最全分析,请手写一个webpack4

面试官:请手写一个webpack4.0配置

2018/07/23 · 根底技艺 · webpack

原来的书文出处: WsmDyj   

认同过眼神,你依然不曾兵马未动粮草先行未雨筹算粮草先行秋招的人?时间仓促。自京东一月8号开启管培生的招徕约请,就表示秋招的开头。可是你还在等着首秋的到来?二零一三年时局应该越来越严厉,随着各大技巧(vue,webpack,react,Wechat小程序卡塔尔(英语:State of Qatar)生态越发成熟,那也象征大家要更参加木伍分的去探听她们,明白他们。譬如你写vue项目,知道vue-cli。写的花色也无以伦比,但是你是或不是又会去打听下vue-cli到底发生了何等?或者那就是面试官要问您的主题材料:请手写八个webpack4.0的配备。

原标题:vue-cli+webpack搭建vue最全解析

前言

机缘总是留给有预备的人,要想在这里不安的求职季里出人头地,拿下你心中期望已久的offer。那么您更因该知道大多外人不通晓的东西,你的羽翼才具从容,才具翱翔于天际。雄鹰展翅飞向青空,靠的不是先性格,而是年轻时断崖之险。勤能补拙,靠的不是小聪明,而是艰辛的鼎力。

一、vue-cli介绍

vue-cli是一个基于nodeJs、用于连忙搭建vue项目标 脚手架。

二、vue-cli安装、更新

安装过nodeJs 、cnpm 后,全局安装vue-cli(现在别的类型可一直选拔):

cnpm install -g vue-cli

更新:

cnpm update vue-cli

查看安装成功否(有版本号正是马到功成,V大写)

vue -V

查阅npm注册表里vue-cli版本号:

cnpm view vue-cli

三、vue-cli 使用

设置过webpack 、vue-cli后,能够开首搭建vue项目:

vue init webpack <Project Name>

eg:右击Git Base Here(就算你未曾用git ,你也得以按住shift键右击选拔“在这里边张开命令窗口”,恐怕 cmd :cd project/lfxProject),如图:

美高梅手机版 1or

ps:ESLint(一个java代码检查评定工具卡塔尔(قطر‎、unit tests(单元测验卡塔尔(英语:State of Qatar)、Nightwatch(二个e2e客户分界面测量检验工具)。

四、项目成功

类型结构如下:

美高梅手机版 2

各文件功效深入解析,如下:

1、build文件夹:

build文件夹的构造:

美高梅手机版 3

(1)build.js

'use strict'

require('./check-versions'卡塔尔国(卡塔尔 //调用版本检查

process.env.NODE_ENV = 'production' //将情形布置为生育情形

const ora = require('ora') //npm包 loading插件

const rm = require('rimraf'卡塔尔国 //npm包 用于删除文件

const path = require('path'卡塔尔//npm包 文件路线工具

const chalk = require('chalk'卡塔尔(英语:State of Qatar)//npm包 在终端输出带颜色的文字

const webpack = require('webpack')//引入webpack.js

const config = require('../config'卡塔尔国//引进配置文件

const webpackConfig = require('./webpack.prod.conf'卡塔尔国//引进生产景况安顿文件

// 在终端突显loading效果,并出口提示

const spinner = ora('building for production...')

spinner.start()

//先递归删除dist文件再生成新文件,防止冗余

rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {

if (err) throw err

webpack(webpackConfig, (err, stats) => {

spinner.stop()

if (err) throw err

process.stdout.write(stats.toString({

colors: true,

modules: false,

children: false,

chunks: false,

chunkModules: false

}) + 'nn')

if (stats.hasErrors()) {

console.log(chalk.red(' Build failed with errors.n'))

process.exit(1)

}

console.log(chalk.cyan(' Build complete.n'))

console.log(chalk.yellow(

' Tip: built files are meant to be served over an HTTP server.n' +

' Opening index.html over file:// won't work.n'

))

})

})

ps:require/export是大器晚成种nodeJs(commonJs标准卡塔尔国的注重性注入的措施,import/export是ES6语法,用于引进模块,在nodeJs中利用的ES6语法最后会采取babel工具(babel-loader)转变为ES5

(2)check-version.js:检验node和npm的本子,完毕版本信任

'use strict'

const chalk = require('chalk')

const semver = require('semver'卡塔尔//检查版本

const packageConfig = require('../package.json')

const shell = require('shelljs'卡塔尔(قطر‎//shelljs 模块重新打包了 child_process,调用系统命令越发有益于

function exec (cmd卡塔尔 {//重临通过child_process模块的新建子进度,试行 Unix 系统命令后转成未有空格的字符串

return require('child_process').execSync(cmd).toString().trim()

}

const versionRequirements = [

{

name: 'node',

currentVersion: semver.clean(process.version卡塔尔,//使用semver格式化版本

versionRequirement: packageConfig.engines.node //获取package.json中设置的node版本

}

]

if (shell.which('npm')) {

versionRequirements.push({

name: 'npm',

currentVersion: exec('npm --version'卡塔尔(قطر‎,// 自动调用npm --version命令,况且把参数再次回到给exec函数,进而拿到纯净的本子号

versionRequirement: packageConfig.engines.npm

})

}

module.exports = function () {

const warnings = []

for (let i = 0; i < versionRequirements.length; i++) {

const mod = versionRequirements[i]

//若版本号不合乎package.json文件中钦命的本子号,就报错

if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {

warnings.push(mod.name + ': ' +

chalk.red(mod.currentVersion) + ' should be ' +

chalk.green(mod.versionRequirement)

)

}

}

if (warnings.length) {

console.log('')

console.log(chalk.yellow('To use this template, you must update following to modules:'))

console.log()

for (let i = 0; i < warnings.length; i++) {

const warning = warnings[i]

console.log(' ' + warning)

}

console.log()

process.exit(1)

}

}

(3)utils.js:utils是工具的野趣,是一个用来管理css的公文,那么些文件包蕴了四个工具函数:

  • 变动静态资源的门路
  • 生成 ExtractTextPlugin对象或loader字符串
  • 生成 style-loader的配置

var path = require('path'卡塔尔// node自带的文书路线工具

var config = require('../config'卡塔尔// 配置文件

var ExtractTextPlugin = require('extract-text-webpack-plugin')// 提取css的插件

/** @method assertsPath 生成静态能源的门径(判定开荒条件和分娩条件,为config文件中index.js文件中定义assetsSubDirectory卡塔尔(英语:State of Qatar)

* @param {String} _path 相对于静态能源文件夹的公文路线

* @return {String} 静态能源总体路线

*/

exports.assetsPath = function (_path) {

var assetsSubDirectory = process.env.NODE_ENV === 'production'

? config.build.assetsSubDirectory

: config.dev.assetsSubDirectory

//nodeJs path提供用于拍卖公事路径的工具;path.posix提供对路径方法的POSIX(可移植性操作系统接口卡塔尔国特定完结的拜访(可跨平台卡塔尔(英语:State of Qatar); path.posix.join与path.join相仿,但是三番两次以 posix 包容的诀要相互

return path.posix.join(assetsSubDirectory, _path)

}

/**@method cssLoaders 生成处理css的loaders配置,使用css-loader和postcssLoader,通过options.usePostCSS属性来判别是还是不是采纳postcssLoader中减掉等情势

* @param {Object} option = {sourceMap: true,// 是或不是展开sourceMapextract: true // 是还是不是提取css}生成配置

* @return {Object} 管理css的loaders配置对象

*/

exports.cssLoaders = function (options) {

options = options || {}

var cssLoader = {

loader: 'css-loader',

options: {

minimize: process.env.NODE_ENV === 'production',

sourceMap: options.sourceMap

}

}

/**@method generateLoaders 生成 ExtractTextPlugin对象或loader字符串

* @param {Array} loaders loader名称数组

* @return {String|Object} ExtractTextPlugin对象或loader字符串

*/

function generateLoaders (loader, loaderOptions) {

var loaders = [cssLoader]

if (loader) {

loaders.push({

loader: loader + '-loader',

options: Object.assign({}, loaderOptions, {

sourceMap: options.sourceMap

})

})

}

// ExtractTextPlugin提取css(当上边的loaders未能正确引进时,使用vue-style-loader卡塔尔(英语:State of Qatar)

if (options.extract卡塔尔(قطر‎ {// 临盆碰着中,默觉得true

return ExtractTextPlugin.extract({

use: loaders,

fallback: 'vue-style-loader'

})

} else {//重临vue-style-loader连接loaders的末梢值

return ['vue-style-loader'].concat(loaders)

}

}

return {

css: generateLoaders(),//需要css-loader 和 vue-style-loader

postcss: generateLoaders(),//需要css-loader、postcssLoader 和 vue-style-loader

less: generateLoaders('less'),//需要less-loader 和 vue-style-loader

sass: generateLoaders('sass', { indentedSyntax: true }),//需要sass-loader 和 vue-style-loader

scss: generateLoaders('sass'),//需要sass-loader 和 vue-style-loader

stylus: generateLoaders('stylus'),//需要stylus-loader 和 vue-style-loader

styl: generateLoaders('stylus')//需要stylus-loader 和 vue-style-loader

}

}

/**@method styleLoaders 生成 style-loader的配置

* @param {Object} options 生成配置

* @return {Array} style-loader的配置

*/

exports.styleLoaders = function (options) {

var output = []

var loaders = exports.cssLoaders(options)

//将各样css,less,sass等综合在一块得出结果输出output

for (var extension in loaders) {

var loader = loaders[extension]

output.push({

test: new RegExp('\.' + extension + '$'),

use: loader

})

}

return output

}

(4)vue-loader.conf.js:处理.vue文件,深入分析那几个文件中的每种语言块(template、、style卡塔尔(قطر‎,调换到js可用的js模块。

'use strict'

const utils = require('./utils')

const config = require('../config')

const isProduction = process.env.NODE_ENV === 'production'

//临蓐遇到,提取css样式到独门文件

const sourceMapEnabled = isProduction

? config.build.productionSourceMap

: config.dev.cssSourceMap

module.exports = {

loaders: utils.cssLoaders({

sourceMap: sourceMapEnabled,

extract: isProduction

}),

cssSourceMap: sourceMapEnabled,

cacheBusting: config.dev.cacheBusting,

//编写翻译时将“引进路线”调换为require调用,使其可由webpack管理

transformToRequire: {

video: ['src', 'poster'],

source: 'src',

img: 'src',

image: 'xlink:href'

}

}

(5)webpack.base.conf.js:开辟、测量试验、坐蓐境遇的公家幼功配置文件,配置输出情状,配置模块resolve和插件等

'use strict'

const path = require('path'卡塔尔(英语:State of Qatar)// node自带的文本路线工具

const utils = require('./utils'卡塔尔(英语:State of Qatar)// 工具函数集结

const config = require('../config'卡塔尔(قطر‎// 配置文件

const vueLoaderConfig = require('./vue-loader.conf'卡塔尔(英语:State of Qatar)// 工具函数集合

/**

* 获取"相对路线"

* @method resolve

* @param {String} dir 相对于本文件的路径

* @return {String} 相对路线

*/

function resolve(dir) {

return path.join(__dirname, '..', dir)

}

module.exports = {

context: path.resolve(__dirname, '../'),

//入口js文件(默以为单页面所以唯有app五个进口卡塔尔(英语:State of Qatar)

entry: {

app: './src/main.js'

},

//配置出口

output: {

path: config.build.assetsRoot,//打包编写翻译的根路线(dist卡塔尔国

filename: '[name].js',

publicPath: process.env.NODE_ENV === 'production'

? config.build.assetsPublicPath

: config.dev.assetsPublicPath//发表路径

},

resolve: {

extensions: ['.js', '.vue', '.json'],// 自动补全的恢宏名

//小名配置

alias: {

'vue$': 'vue/dist/vue.esm.js',

'@': resolve('src'),// eg:"src/components" => "@/components"

}

},

module: {

rules: [

//使用vue-loader将vue文件编写翻译转变为js

{

test: /.vue$/,

loader: 'vue-loader',

options: vueLoaderConfig

},

//通过babel-loader将ES6编写翻译压缩成ES5

{

test: /.js$/,

loader: 'babel-loader',

include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]

},

//使用url-loader处理(图片、音像、字体),超过10000编译成

{

test: /.(png|jpe?g|gif|svg)(?.*)?$/,

loader: 'url-loader',

options: {

limit: 10000,

name: utils.assetsPath('img/[name].[hash:7].[ext]')

}

},

{

test: /.(mp4|webm|ogg|mp3|wav|flac|aac)(?.*)?$/,

loader: 'url-loader',

options: {

limit: 10000,

name: utils.assetsPath('media/[name].[hash:7].[ext]')

}

},

{

test: /.(woff2?|eot|ttf|otf)(?.*)?$/,

loader: 'url-loader',

options: {

limit: 10000,

name: utils.assetsPath('fonts/[name].[hash:7].[ext]')

}

}

]

},

//nodeJs全局变量/模块,防止webpack注入一些nodeJs的事物到vue中

node: {

setImmediate: false,

dgram: 'empty',

fs: 'empty',

net: 'empty',

tls: 'empty',

child_process: 'empty'

}

}

(6)webpack.dev.conf.js:webpack配置开采条件中的入口

'use strict'

const utils = require('./utils')

const webpack = require('webpack')

const config = require('../config')

const merge = require('webpack-merge'卡塔尔(英语:State of Qatar)//webpack-merge完成统生机勃勃

const path = require('path')

const baseWebpackConfig = require('./webpack.base.conf')

const CopyWebpackPlugin = require('copy-webpack-plugin')

const HtmlWebpackPlugin = require('html-webpack-plugin')

const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin'卡塔尔国//webpack的提示错误和日志消息的插件

const portfinder = require('portfinder'卡塔尔国// 查看空闲端口地方,默认情况下寻觅8000这些端口

const HOST = process.env.HOST

const PORT = process.env.PORT && Number(process.env.PORT)

const devWebpackConfig = merge(baseWebpackConfig, {

module: {

rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })

},

devtool: config.dev.devtool,//调节和测验形式

devServer: {

clientLogLevel: 'warning',

historyApiFallback: {//使用 HTML5 History API 时, 404 响应取代为 index.html

rewrites: [

{ from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },

],

},

hot: true,//热重载

contentBase: false, // 提供静态文件访谈

compress: true,//压缩

host: HOST || config.dev.host,

port: PORT || config.dev.port,

open: config.dev.autoOpenBrowser,//npm run dev 时自动展开浏览器

overlay: config.dev.errorOverlay

? { warnings: false, errors: true }

: false,// 显示warning 和 error 信息

publicPath: config.dev.assetsPublicPath,

proxy: config.dev.proxyTable,//api代理

quiet: true, //调节台打字与印刷警报和谬误(用FriendlyErrorsPlugin 为 true卡塔尔(英语:State of Qatar)

watchOptions: {// 检查实验文件改造

poll: config.dev.poll,

}

},

plugins: [

new webpack.DefinePlugin({

'process.env': require('../config/dev.env')

}),

new webpack.HotModuleReplacementPlugin(卡塔尔(قطر‎,//模块热替换插件,订正模块时没有须求刷新页面

new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.

new webpack.NoEmitsPlugin(卡塔尔国,//webpack编写翻译错误的时候,中断打包进程,幸免错误代码打包到文件中

// 将包裹编写翻译好的代码插入index.html

new HtmlWebpackPlugin({

filename: 'index.html',

template: 'index.html',

inject: true

}),

// 提取static assets 中css 复制到dist/static文件

new CopyWebpackPlugin([

{

from: path.resolve(__dirname, '../static'),

to: config.dev.assetsSubDirectory,

ignore: ['.*']//忽略.*的文件

}

])

]

})

module.exports = new Promise((resolve, reject) => {

portfinder.basePort = process.env.PORT || config.dev.port

portfinder.getPort((err, port卡塔尔(英语:State of Qatar) => { //查找端口号

if (err) {

reject(err)

} else {

//端口被占用时就再也设置evn和devServer的端口

process.env.PORT = port

devWebpackConfig.devServer.port = port

// npm run dev成功的交情提示

devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({

compilationSuccessInfo: {

messages: [`Your application is running here: ],

},

s: config.dev.notifys

? utils.createNotifierCallback()

: undefined

}))

resolve(devWebpackConfig)

}

})

})

(7)webpack.dev.prod.js:webpack配置坐褥条件中的入口

'use strict'

const path = require('path')

const utils = require('./utils')

const webpack = require('webpack')

const config = require('../config')

const merge = require('webpack-merge')

const baseWebpackConfig = require('./webpack.base.conf')

const CopyWebpackPlugin = require('copy-webpack-plugin')

const HtmlWebpackPlugin = require('html-webpack-plugin')

const ExtractTextPlugin = require('extract-text-webpack-plugin')

const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

const env = require('../config/prod.env')

const webpackConfig = merge(baseWebpackConfig, {

module: {

rules: utils.styleLoaders({

sourceMap: config.build.productionSourceMap,

extract: true,

usePostCSS: true

})

},

devtool: config.build.productionSourceMap ? config.build.devtool : false,//是或不是张开调节和测验形式

output: {

path: config.build.assetsRoot,

filename: utils.assetsPath('js/[name].[chunkhash].js'),

chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')

},

plugins: [

new webpack.DefinePlugin({

'process.env': env

}),

new UglifyJsPlugin({//压缩js

uglifyOptions: {

compress: {

warnings: false

}

},

sourceMap: config.build.productionSourceMap,

parallel: true

}),

new ExtractTextPlugin({//提取静态文件,减少央浼

filename: utils.assetsPath('css/[name].[contenthash].css'),

allChunks: true,

}),

new OptimizeCSSPlugin({//提取优化压缩后(删除来自分化组件的冗余代码卡塔尔(英语:State of Qatar)的css

cssProcessorOptions: config.build.productionSourceMap

? { safe: true, map: { inline: false } }

: { safe: true }

}),

new HtmlWebpackPlugin({ //html打包压缩到index.html

filename: config.build.index,

template: 'index.html',

inject: true,

minify: {

removeComments: true,//删除注释

collapseWhitespace: true,//删除空格

removeAttributeQuotes: true//删除属性的引号

},

chunksSortMode: 'dependency'//模块排序,遵照大家须求的逐一排序

}),

new webpack.HashedModuleIdsPlugin(),

new webpack.optimize.ModuleConcatenationPlugin(),

new webpack.optimize.CommonsChunkPlugin({ // node_modules中的任何所需模块都领到到vendor

name: 'vendor',

minChunks (module) {

return (

module.resource &&

/.js$/.test(module.resource) &&

module.resource.indexOf(

path.join(__dirname, '../node_modules')

) === 0

)

}

}),

new webpack.optimize.CommonsChunkPlugin({

name: 'manifest',

minChunks: Infinity

}),

new webpack.optimize.CommonsChunkPlugin({

name: 'app',

async: 'vendor-async',

children: true,

minChunks: 3

}),

new CopyWebpackPlugin([//复制static中的静态能源(暗中同意到dist里面)

{

from: path.resolve(__dirname, '../static'),

to: config.build.assetsSubDirectory,

ignore: ['.*']

}

])

]

})

if (config.build.productionGzip) {

const CompressionWebpackPlugin = require('compression-webpack-plugin')

webpackConfig.plugins.push(

new CompressionWebpackPlugin({

asset: '[path].gz[query]',

algorithm: 'gzip',

test: new RegExp(

'\.(' +

config.build.productionGzipExtensions.join('|') +

')$'

),

threshold: 10240,

minRatio: 0.8

})

)

}

if (config.build.bundleAnalyzerReport) {

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin

webpackConfig.plugins.push(new BundleAnalyzerPlugin())

}

module.exports = webpackConfig

2、config文件夹:

config文件夹的构造:

美高梅手机版 4

(1) dev.env.js和prod.env.js:分别布署:开荒条件和分娩条件。这些能够依照公司职业重组后端供给安顿须求区分开垦条件和测量试验意况的习性

'use strict'

const merge = require('webpack-merge')

const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {

NODE_ENV: '"development"'

})

ps:webpack-merge用于达成合併相通于ES6的Object.assign(卡塔尔(قطر‎

'use strict'

module.exports = {

NODE_ENV: '"production"'

}

(*小心属性值要用“‘’”双层引住),访谈(获取值)时一直用:

process.env.属性名

ps:process(进度)是nodejs的多个全局变量,process.env 属性重临三个客户情况音讯的对象

(2)index.js配置剖判:

'use strict';

const path = require('path');

module.exports = {

// ===================开垦条件陈设

dev: {

assetsSubDirectory: 'static',//静态财富文件夹(日常贮存css、js、image等公事卡塔尔

assetsPublicPath: '/',//根目录

proxyTable: {},//配置API代理,可应用该属性消灭跨域的问题

host: 'localhost', // 可以被 process.env.HOST 覆盖

port: 3030, // 可以被 process.env.PORT 覆盖

autoOpenBrowser: true,//编写翻译后自行展开浏览器页面 + host",暗许"false"卡塔尔国,设置路由重定向自动展开你的私下认可页面

errorOverlay: true,//浏览器错误提示

notifys: true,//跨平台错误提示

poll: false, //webpack提供的行使文件系统(file system卡塔尔国获取文件改造的通报devServer.watchOptions(监察和控制文件退换卡塔尔国

devtool: 'cheap-module-eval-source-map',//webpack提供的用来调度的形式,有多少个分裂值代表差异的调节和测量试验方式

cacheBusting: true,// 合营devtool的安顿,当给文件名插入新的hash引致扫除缓存时是还是不是生成source-map

cssSourceMap: true //记录代码压缩前的职位消息,当发生错误时平昔定位到未压缩前之处,方便调节和测验

},

// ========================生产条件布署

build: {

index: path.resolve(__dirname, '../dist/index.html'卡塔尔国,//编写翻译后"首页面"生成的相对路线和名字

assetsRoot: path.resolve(__dirname, '../dist'卡塔尔,//打包编写翻译的根路线(暗许dist,存放打包压缩后的代码卡塔尔(قطر‎

assetsSubDirectory: 'static',//静态能源文件夹(日常存放css、js、image等公事卡塔尔(قطر‎

assetsPublicPath: '/',//宣布的根目录(dist文件夹所在路线卡塔尔(英语:State of Qatar)

productionSourceMap: true,//是还是不是开启source-map

devtool: '#source-map',//(详细参见:)

productionGzip: false,//是不是裁减

productionGzipExtensions: ['js', 'css'],//unit的gzip命令用来压缩文件(gzip格局下供给缩短的文件的强大名有js和css)

bundleAnalyzerReport: process.env.npm_config_report //是或不是开启包装后的深入分析报告

}

};

3、node_modules文件夹:存放npm install时根据package.json配置生成的npm安装包的文本夹

4、src文件夹:大家要求在src文件夹中费用代码,打包时webpack会根据build中的准则(build准绳信任于config中的配置)将src打包压缩到dist文件夹在浏览器中运作

(1)assets文件:用于贮存静态能源(css、image),assets打包时路线会经过webpack中的file-loader编译(因而,assets必要选取相对路线)成js

(2)components文件夹:用来存放 .vue 组件(完结复用等效率,如:过滤器,列表项等卡塔尔(قطر‎

(3)router文件夹:在router/index.js文件中安顿页面路由

(4)App.vue:是漫天项指标主组件,全数页面都以经过行使<router-view/>开放入口在App.vue下实行切换的(全数的路由都是App.vue的子组件)

(5)main.js:入口js文件(全局js,你能够在这地:初步化vue实例、require/import需求的插件、注入router路由、引进store状态管理)

5、static文件夹:webpack暗中认可寄存静态文件(css、image)的文本夹,与assets差别的是:static在包装时会直接复制二个同名文件夹到dist文件夹里(不会通过编写翻译,可应用相对路线)

6、其余文件:

(1).babelrc:浏览器剖判的同盟配置,该公文根本是对预设(presets)和插件(plugins)举办布署,由此不一样的转译器效用不风流倜傥的配置项,大约可分为:语法转义器、补丁转义器、sx和flow插件

(2).editorconfig:用于配置代码格式(同盟代码检查工具使用,如:ESLint,团队费用时可统一代码风格),这里配置的代码规范准绳优先级高于编辑器暗中认可的代码格式化准绳。

(3).gitignore:配置git提交时必要忽视的公文

(4)postcssrc.js: autoprefixer(自动补全css样式的浏览器前缀);postcss-import(@import引进语法)、CSS Modules(规定样式效率域)

(5)index.html:项目进口页面,编写翻译之后有所代码将插入到那来

(6)package.json:npm的配备文件(npm install根据package.json下载对应版本的安装包)

(7)package.lock.json:npm install(安装)时锁定各包的本子号

(8)README.md:项目利用表达

webpack详解

webpack是二个装进工具,他的核心是成套静态财富就可以打包。有人就能够问为什么要webpack?webpack是当代前端才能的水源,常规的开垦格局,举例jquery,html,css静态网页开垦已经落伍了。未来是MVVM的临时,数据驱动分界面。webpack将今世js开拓中的各个最新有用的技术,集合打包。webpack的陈述遮天盖地,笔者就不浪费大家的光阴了。精晓下这种图就知道webpack的生态圈了:
美高梅手机版 5

五、运营项目

在webStorm中开垦项目,首先赶紧右击Project举行如下操作(不然会卡死,还应该有种种其他方法参见:

美高梅手机版 6

(1)运维安装:cnpm install

美高梅手机版 7

(2)然后npm run dev:跑起来~

美高梅手机版 8

(3)生成打包文件 :npm run build

接下来您会开采项目多了个dist文件夹(用于铺排到生育情形用,是包装压缩之后的src文件夹)

美高梅手机版 9

© 文章权归我全部重临博客园,查看更加的多

责编:

webpack4.0的配置

JavaScript

const path = require('path'卡塔尔国; //引进node的path模块 const webpack = require('webpack'卡塔尔国; //引进的webpack,使用lodash const HtmlWebpackPlugin = require('html-webpack-plugin'卡塔尔国 //将html打包 const ExtractTextPlugin = require('extract-text-webpack-plugin'卡塔尔(قطر‎ //打包的css拆分,将部分分离出来 const CopyWebpackPlugin = require('copy-webpack-plugin'卡塔尔 // console.log(path.resolve(__dirname,'dist'卡塔尔(英语:State of Qatar)卡塔尔; //物理地址拼接 module.exports = { entry: './src/index.js', //入口文件 在vue-cli main.js output: { //webpack怎么样输出 path: path.resolve(__dirname, 'dist'卡塔尔, //定位,输出文件的靶子路线 filename: '[name].js' }, module: { //模块的有关布置 rules: [ //依据文件的后缀提供叁个loader,深入分析准则 { test: /.js$/, //es6 => es5 include: [ path.resolve(__dirname, 'src') ], // exclude:[], 不相配选项(优先级高于test和include) use: 'babel-loader' }, { test: /.less$/, use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: [ 'css-loader', 'less-loader' ] }) }, { //图片loader test: /.(png|jpg|gif)$/, use: [ { loader: 'file-loader' //依照文件地点加载文件 } ] } ] }, resolve: { //剖析模块的可选项 // modules: [ ]//模块的探究目录 配置其余的css等公事 extensions: [".js", ".json", ".jsx",".less", ".css"], //用到文件的扩张名 alias: { //模快外号列表 utils: path.resolve(__dirname,'src/utils') } }, plugins: [ //插进的援引, 压缩,分离美化 new ExtractTextPlugin('[name].css'), //[name] 暗许 也得以自定义name 证明使用 new HtmlWebpackPlugin({ //将模板的尾部和尾巴部分加多css和js模板,dist 目录揭橥到服务器上,项目包。能够一贯上线 file: 'index.html', //构建单页面运用 最终运营的不是以此 template: 'src/index.html' //vue-cli放在跟目录下 }卡塔尔国, new CopyWebpackPlugin([ //src下此外的公文一向复制到dist目录下 { from:'src/assets/favicon.ico',to: 'favicon.ico' } ]卡塔尔(قطر‎, new webpack.ProvidePlugin({ //引用框架 jquery lodash工具库是大多零器件会复用的,省去了import '_': 'lodash' //引用webpack }) ], devServer: { //服务于webpack-dev-server 内部封装了三个express port: '8080', before(app卡塔尔(英语:State of Qatar) { app.get('/api/test.json', (req, res卡塔尔 => { res.json({ code: 200, message: 'Hello World' }卡塔尔国 }卡塔尔(英语:State of Qatar) } } }

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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
const path = require('path');  //引入node的path模块
const webpack = require('webpack'); //引入的webpack,使用lodash
const HtmlWebpackPlugin = require('html-webpack-plugin')  //将html打包
const ExtractTextPlugin = require('extract-text-webpack-plugin')     //打包的css拆分,将一部分抽离出来  
const CopyWebpackPlugin = require('copy-webpack-plugin')
// console.log(path.resolve(__dirname,'dist')); //物理地址拼接
module.exports = {
    entry: './src/index.js', //入口文件  在vue-cli main.js
    output: {       //webpack如何输出
        path: path.resolve(__dirname, 'dist'), //定位,输出文件的目标路径
        filename: '[name].js'
    },
    module: {       //模块的相关配置
        rules: [     //根据文件的后缀提供一个loader,解析规则
            {
                test: /.js$/,  //es6 => es5
                include: [
                    path.resolve(__dirname, 'src')
                ],
                // exclude:[], 不匹配选项(优先级高于test和include)
                use: 'babel-loader'
            },
            {
                test: /.less$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: [
                    'css-loader',
                    'less-loader'
                    ]
                })
            },
            {       //图片loader
                test: /.(png|jpg|gif)$/,
                use: [
                    {
                        loader: 'file-loader' //根据文件地址加载文件
                    }
                ]
            }
        ]                  
    },
    resolve: { //解析模块的可选项  
        // modules: [ ]//模块的查找目录 配置其他的css等文件
        extensions: [".js", ".json", ".jsx",".less", ".css"],  //用到文件的扩展名
        alias: { //模快别名列表
            utils: path.resolve(__dirname,'src/utils')
        }
    },
    plugins: [  //插进的引用, 压缩,分离美化
        new ExtractTextPlugin('[name].css'),  //[name] 默认  也可以自定义name  声明使用
        new HtmlWebpackPlugin({  //将模板的头部和尾部添加css和js模板,dist 目录发布到服务器上,项目包。可以直接上线
            file: 'index.html', //打造单页面运用 最后运行的不是这个
            template: 'src/index.html'  //vue-cli放在跟目录下
        }),
        new CopyWebpackPlugin([  //src下其他的文件直接复制到dist目录下
            { from:'src/assets/favicon.ico',to: 'favicon.ico' }
        ]),
        new webpack.ProvidePlugin({  //引用框架 jquery  lodash工具库是很多组件会复用的,省去了import
            '_': 'lodash'  //引用webpack
        })
    ],
    devServer: {  //服务于webpack-dev-server  内部封装了一个express
        port: '8080',
        before(app) {
            app.get('/api/test.json', (req, res) => {
                res.json({
                    code: 200,
                    message: 'Hello World'
                })
            })
        }
    }
    
}

风流倜傥、前端情形搭建

大家应用npm或yarn来设置webpack

JavaScript

npm install webpack webpack-cli -g # 或者 yarn global add webpack webpack-cli

1
2
3
npm install webpack webpack-cli -g
# 或者
yarn global add webpack webpack-cli

为什么webpack会分为五个公文呢?在webpack3中,webpack本人和它的cli从前都以在同贰个包中,但在第4版中,他们风流罗曼蒂克度将两侧分别来更加好地保管它们。

新建四个webpack的文书夹,在其下新建三个try-webpack(防止init时项目名和设置包同名)并伊始化和布署webpack。

JavaScript

npm init -y //-y 暗许全体的安顿 yarn add webpack webpack-cli -D //-D webpack安装在devDependencies环境中

1
2
npm init -y  //-y 默认所有的配置
yarn add webpack webpack-cli -D  //-D webpack安装在devDependencies环境中

二、部署webpack

在上边搭建好的景况项目中,大家过来package.json里安插大家的scripts,让webpack

JavaScript

"scripts": { "build": "webpack --mode production" //大家在此边配置,就足以行使npm run build 运行大家的webpack }, "devDependencies": { "webpack": "^4.16.0", "webpack-cli": "^3.0.8" }

1
2
3
4
5
6
7
  "scripts": {
    "build": "webpack --mode production" //我们在这里配置,就可以使用npm run build 启动我们的webpack
  },
  "devDependencies": {
    "webpack": "^4.16.0",
    "webpack-cli": "^3.0.8"
  }

结构好大家webpack的运作意况时,联想下vue-cli。平常使用vue-cli会自动帮我们布置并扭转项目。大家在src下举办项目标开支,最后npm run build 打包生成咱们的dist的目录。不明了你是否还记得,照旧让我们进来下生机勃勃节让大家心得下那其间的正个流程吧。

三、npm run build 爆发了怎么

在我们的根项目下try-webpack新建八个src目录。在src目录下新建多少个index.js文件。在里面大家得以写任性的代码,以案例为主:

const a = 1;

写完之后大家在终点运转我们的吩咐 npm run build;你就能够意识新添了一个dist目录,里面存放着webpack打包好的main.js文件。那和我们在vue-cli里操作是同豆蔻梢头的。

四、webpackp配置流程篇

咱俩在开辟是日常会卷入src下的如何文件呢?大家得以回看一下,其实vue-cli项目src下不就这几点呗:

  • 揭橥时索要的html,css,js
  • css预编写翻译器stylus,less,sass
  • es6的高档次和等第语法
  • 图片财富.png,.gif,.ico,.jpg
  • 文件间的require
  • 外号@等修饰符

那么自身将会分这几点来上课webpack中webpack.config.js的配置,跟着脚步,一步一步的来成功大家的流程线。

郑重声明:本文版权归美高梅163888所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。