您的位置:新葡亰496net > 新葡亰官网 > 入门教程,请手写叁个webpack4

入门教程,请手写叁个webpack4

发布时间:2019-11-24 05:18编辑:新葡亰官网浏览(89)

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

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

    初藳出处: WsmDyj   

    分明过眼神,你依然尚未筹划秋招的人?时间仓促。自京东6月8号开启管培生的爱才如命,就代表秋招的开始。不过你还在等着晚秋的来到?二〇一五年地势应该尤其严谨,随着各大本事(vue,webpack,react,Wechat小程序)生态尤其成熟,这也意味着大家要更为尖锐的去精晓她们,精通他们。比方你写vue项目,知道vue-cli。写的档期的顺序也无以伦比,然则你是或不是又会去询问下vue-cli到底发出了何等?也许那正是面试官要问您的标题:请手写多个webpack4.0的布署。

    原标题:vue-cli webpack搭建vue最全深入分析

     

    概述

    正文写于 Webpack 2 行业内部发布在此以前(完备文书档案阶段卡塔尔,不独有是 Webpack 2 的入门教程,也介绍了 Webpack 是什么。
    原稿地址:Getting Started with Webpack 2
    初藳小编:Drew Powers
    译者:linpu.li

    前言

    机缘总是留给有筹算的人,要想在这里不安的求职季里出一头地,拿下你心里期望已久的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(单元测验)、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')//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卡塔 尔(英语:State of Qatar)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)

    * @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(可移植性操作系统接口)特定完成的访谈(可跨平台); 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)

    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卡塔 尔(英语:State of Qatar)webpack.base.conf.js:开拓、测量试验、临盆遭遇的公共幼功配置文件,配置输出意况,配置模块resolve和插件等

    'use strict'

    const path = require('path')// node自带的文件路线工具

    const utils = require('./utils')// 工具函数群集

    const config = require('../config')// 配置文件

    const vueLoaderConfig = require('./vue-loader.conf')// 工具函数集合

    /**

    * 获取"相对路径"

    * @method resolve

    * @param {String} dir 绝对于本文件的不二等秘书技

    * @return {String} 相对路线

    */

    function resolve(dir) {

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

    }

    module.exports = {

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

    //入口js文件(默感觉单页面所以唯有app贰个输入)

    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')//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)

    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) => { //查找端口号

    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({//提取优化压缩后(删除来自不一样组件的冗余代码)的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(进度卡塔 尔(英语:State of Qatar)是nodejs的一个全局变量,process.env 属性重返二个顾客景况音讯的靶子

    (2卡塔 尔(英语:State of Qatar)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等文件)

    assetsPublic帕特h: '/',//公布的根目录(dist文件夹所在门路)

    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中的配置卡塔 尔(英语:State of Qatar)将src打包压缩到dist文件夹在浏览器中运转

    (1卡塔 尔(阿拉伯语:قطر‎assets文件:用于存放静态财富(css、image卡塔 尔(英语:State of Qatar),assets打包时路线会经过webpack中的file-loader编写翻译(因此,assets必要使用相对路线卡塔 尔(英语:State of Qatar)成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(规定样式功用域卡塔 尔(英语:State of Qatar)

    (5卡塔 尔(阿拉伯语:قطر‎index.html:项目入口页面,编写翻译之后全体代码将插入到那来

    (6卡塔 尔(英语:State of Qatar)package.json:npm的布置文件(npm install依照package.json下载对应版本的安装包卡塔 尔(阿拉伯语:قطر‎

    (7卡塔尔国package.lock.json:npm install(安装卡塔尔时锁定各包的版本号

    (8卡塔 尔(阿拉伯语:قطر‎README.md:项目应用验证

    1.入门

    Webpack 是及时最看好的前端财富模块化管理和包装工具。它能够将洋洋松散的模块遵照正视和法规打包成符合生产条件安排的前端财富。还是能够将按需加载的模块实行代码分隔,等到实际必要的时候再异步加载。通过 loader 的改换,任何格局的能源都得以看做模块,举例 CommonJs 模块、 英特尔模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。
    webpack在开荒中能够行使 JavaScript 处理你的信任关系和加载顺序,防止意外引进一些您无需在生养中用上的 CSS 样式表和 JS 库,使项目膨胀,或再一次载入有些js,css等库。

    Webpack 2 将在其文书档案完毕之后正式发布。但那并不代表无法起来应用它,假如您驾驭怎么布局的话。

    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

    © 著作权归笔者全体回去微博,查看越多

    小编:

     

    使用webpack

    1. 什么是 Webpack?

    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')); //物理地址拼接 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' }) }) } } }

    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'
                    })
                })
            }
        }
        
    }

    webpack网站: 

    开端化项目

    1.1 解答

    简短来讲,Webpack 正是四个针对性 JavaScript 代码的模块打包工具。可是自公布以来,它衍形成了一个对准具备前端代码的管理工科具(不管是其自个儿有意照旧社区的愿望卡塔 尔(阿拉伯语:قطر‎。

    图片 10

    旧的天职运维工具处理格局:HTML、CSS 和 JavaScript 都以抽离的。必需各自对每风流倜傥项进行管理,而且还要有限支持全部东西准确地配备到生产条件。

    Gulp 那样的职务运营工具得以操作非常多莫衷一是的预微处理机和编写翻译器,不过在装有景况下,它都急需摄取三个源码输入并将其管理成二个编写翻译好的输出。然则,它是在不关怀整个系统的情景下各种去管理的。那就是开拓者的承负了:检查任务运营工具有无脱漏的地点,并为全数更动的意气风发部分找到科学的法子,将它们在生养意况上协和风流洒脱致。

    Webpack 通过一个敢于的刺探试图减轻开采者的担任:**若是开辟进度的某部部分能够和睦管理信任会怎么着?假使大家得以以如此风流倜傥种办法来回顾地写代码:构建进程仅依据最终所急需的东西来保管它本身,会什么?
    **

    图片 11

    Webpack 管理方式:如若是 Webpack 知道的代码,那么它就只会卷入实际在生育条件个中使用的有的。

    后生可畏经您是病故几年里 Web 社区中游的大器晚成员,那么你一定已经清楚首要推荐解决难点的秘诀:使用 JavaScript 构建。所以 Webpack 试图透过用 JavaScript 传递信赖来使创设进程变得更为轻便。可是它布置的精美之处并不在于轻松的代码管理有个别,而在于它的田间管理范围是百分之百实惠的 JavaScript(还大概有 Node 个性卡塔 尔(阿拉伯语:قطر‎。Webpack 使您有机遇写出风度翩翩部分对总连串统有越来越钟情知的 JavaScript 代码。

    换句话说:您不是为了 Webpack 写代码,而是为了你的种类写代码。再正是Webpack 在维持发展(当然富含一些配置卡塔尔国。

    综上可得,借使您曾经挣扎于下边这几个情状中的此中之生龙活虎:

    • 不当心将有个别无需的样式表恐怕 JS 库引进临蓐境况,招致项目体积变大
    • 境遇功用域难点 - 不管是来源于 CSS 依然 JavaScript
    • 不停搜索一个好的系统好让你能够在 JavaScript 代码里应用 Node 或 Bower 的模块,只怕依赖大器晚成八种疯狂的后端配置来科学地应用那么些模块
    • 急需优化能源分发机制却又顾忌会破坏掉有个别事物

    …那么你就能够收益于 Webpack 了。它经过让 JavaScript 代替开荒者的大脑来关切注重和加载顺序,轻便地消除了地点这一个主题材料。最佳的豆蔻梢头部分是怎么?Webpack 以至能够在服务端无缝运转,那代表你仍然是能够使用 Webpack 来营造渐进式加强的网站。

    风流洒脱、前端意况搭建

    咱俩应用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环境中

    npm install webpack -g

    mkdir webpack-demo && cd webpack-demo
    npm init -y
    创办并步入webpack-demo,起初化叁个新的项目,并创制package.json文件,’-y’表示可采取package.json的风流浪漫对暗中认可值(八个npm使用技术卡塔尔国
    开创目录结构:

    2. 第一步

    二、部署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的目录。不知底你是否还记得,照旧让大家进入下风度翩翩节让我们心得下这一个中的正个流程吧。

    不过官方不引入,那会将项目中的webpack锁定到内定版本,并且在应用不一致webpack版本的品种中,恐怕会促成营造项目失效。

    ├── src
    │ ├── main.js
    │ ├── assets
    │ │ ├── css
    │ │ └── img
    ├── README.md
    ├── index.html
    ├── package.json
    ├── webpack.config.js
    └── yarn.lock
    安装

    2.1 第一步

    在这里篇教程里大家将选拔 Yarn(brew install yarn
    )来替代 npm
    ,但这全然在于你和睦,它们做的是同豆蔻梢头的作业。展开到项目文件夹,在命令行窗口运转下边包车型大巴指令加多Webpack 2 到全局包和本土品种里:

    npm i -g webpack webpack-dev-server@2
    yarn add --dev webpack webpack-dev-server@2
    

    然后在根目录新建二个 webpack.config.js
    文本用来声称 Webpack 的布置:

    const path = require('path');
    const webpack = require('webpack');
    module.exports = {
      context: path.resolve(__dirname, './src'),
      entry: {
        app: './app.js',
      },
      output: {
        path: path.resolve(__dirname, './dist'),
        filename: '[name].bundle.js',
      },
    };
    

    注意:__dirname指的是根目录。
    还记得 Webpack “知道”项目里产生了何等吧?它是由此读取你的代码知道的(不用忧虑,它签定了风度翩翩份保密左券卡塔 尔(阿拉伯语:قطر‎。Webpack 基本做了上边那几个业务:

    1. 从 context 对应的文书夹最早…
    2. …寻找 entry 里全部的公文名…
    3. …然后读取它们的剧情。在言之有序代码时,每三个通过 import(ES6卡塔 尔(阿拉伯语:قطر‎ 或 require()(Node卡塔 尔(英语:State of Qatar)引进的信任性都会被打包到最后的创设结果个中。它会随着找寻那些注重,以致那个借助的依据,直到“信任树”的卡片节点 — 只打包它所急需的信赖,没有别的的东西。
    4. 随后,Webpack 将享有东西打包到 output.path 对应的文本夹里,使用 output.filename 对应的命超模板来定名([name] 被 entry 里的靶子键值所替代卡塔尔国

    就此纵然 src/app.js
    文件看起来像上面那样的话(如果提前运维了 yarn add --dev moment
    ):

    import moment from 'moment';
    
    var rightNow = moment().format('MMMM Do YYYY, h:mm:ss a');
    console.log(rightNow);
    
    // "October 23rd 2016, 9:30:24 pm"
    

    继之运维:

    webpack -p
    

    注意:p
    标识表示“分娩(production卡塔 尔(英语:State of Qatar)”形式同不经常候会减弱或丑化(uglify/minify卡塔 尔(英语:State of Qatar)输出。

    接下来它将出口三个 dist/app.bundle.js 文件,功用就是打印出目前不久子和岁月到调控台。注意到 Webpack 自动知道了 'moment' 指的是什么样(但要是已经有一个 moment.js 在您的目录个中,那么 Webpack 默许就能预先选择这么些实际不是 moment 的 Node 模块卡塔尔。

    三、npm run build 产生了怎么

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

    const a = 1;

    写完之后我们在终极运营大家的授命 npm run build;你就能够发觉新扩充了叁个dist目录,里面存放着webpack打包好的main.js文件。那和我们在vue-cli里操作是相近的。

     

    npm i webpack -D
    webpack.config.js

    3. 管理七个公文

    你只必要经过改造 entry
    指标就足以内定放肆数量所企望的 entry 或 output 点。

    四、webpackp配置流程篇

    咱俩在开拓是经常会卷入src下的怎么文件呢?大家得以回顾一下,其实vue-cli项目src下不就这几点呗:

    • 宣布时须要的html,css,js
    • css预编写翻译器stylus,less,sass
    • es6的尖端语法
    • 图表能源.png,.gif,.ico,.jpg
    • 文本间的require
    • 外号@等修饰符

    那么自身将会分这几点来说授webpack中webpack.config.js的安排,跟着脚步,一步一步的来成功大家的流程线。

    npm init -y

    安插音讯

    3.1 多少个文件,打包在一块

    const path = require('path');
    const webpack = require('webpack');
    module.exports = {
      context: path.resolve(__dirname, './src'),
      entry: {
        app: ['./home.js', './events.js', './vendor.js'],
      },
      output: {
        path: path.resolve(__dirname, './dist'),
        filename: '[name].bundle.js',
      },
    };```
    所有文件会按数组顺序一起打包到 dist/app.bundle.js
     一个文件当中。
    
    #### 3.2 多个文件,多个输出
    

    const path = require('path');
    const webpack = require('webpack');

    module.exports = {
    context: path.resolve(__dirname, './src'),
    entry: {
    home: './home.js',
    events: './events.js',
    contact: './contact.js',
    },
    output: {
    path: path.resolve(__dirname, './dist'),
    filename: '[name].bundle.js',
    },
    };

    另外,你还可以选择打包成多个 JS 文件来将应用拆解成几个部分。像上面这样做就可以打包成三个文件:dist/home.bundle.js、dist/events.bundle.js 和 dist/contact.bundle.js。
    
    #### 3.3 自动打包第三方库
    如果你正在将应用拆解,打包成多个 output 的话(如果应用的某部分有大量不需要提前加载的 JS 的话,这样做会很有用),那么在这些文件里就有可能出现重复的代码,因为在解决依赖问题的时候它们是互相不干预的。幸好,Webpack 有一个内建插件 **CommonsChunk** 来处理这个问题:
    

    module.exports = {
    // …
    plugins: [
    new webpack.optimize.CommonsChunkPlugin({
    name: 'commons',
    filename: 'commons.js',
    minChunks: 2,
    }),
    ],
    // …
    };

    现在,在 output 的文件里,如果有任意模块加载了两次或更多(通过 minChunks 设置该值),它就会被打包进一个叫 commons.js 的文件里,后面你就可以在客户端缓存这个文件了。当然,这肯定会造成一次额外的请求,但是却避免了客户端多次下载相同库的问题。所以在很多场景下,这都是提升速度的举措。
    
    #### 3.4 手工打包第三方库
    如果你喜欢自己做更多的事情,您可以选择采用更人工的方法:
    

    module.exports = {
    entry: {
    index: './index.js',
    vendor: ['react', 'react-dom', 'rxjs'],
    },
    // …
    }

    在这里,你明确告诉 webpack 导出包含 react, react-dom, 和 rxjs Node 模块的vendor 包,而不是依靠  CommonsChunkPlugin自动这些事情。
    
    ## 4. 开发
    #### 4.1 开发
    实际上 Webpack 有它自己的开发服务器,所以无论你正在开发一个静态网站,或者只是正在原型化前端阶段,这个服务器都是完美可用的。想要运行它,只需要在 webpack.config.js 里添加一个 devServer 对象:
    

    module.exports = {
    context: path.resolve(__dirname, './src'),
    entry: {
    app: './app.js',
    },
    output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, './dist/assets'),
    publicPath: '/assets', // New
    },
    devServer: {
    contentBase: path.resolve(__dirname, './src'), // New
    },
    };

    现在新建一个 src/index.html 文件,加入下面这行:
    

    <script src="/assets/app.bundle.js"></script>

    然后在命令行中,运行:
    

    webpack-dev-server

    服务器现在就运行在了 localhost:8080 上。注意 script 标签中的 /assets 对应的是 output.publicPath
     的值 - 可以随便填成你想要的命名(如果需要一个 CDN,这就很有用了)。
    
    当你更改 JavaScript 代码的时候,Webpack 就会实时更新页面而无需手动刷新浏览器。但是,**任何对 webpack.config.js 的更改都需要重启服务器**才可以生效。
    
    ## 5. 全局可访问方法
    #### 5.1 全局可访问方法 
    需要在全局命名空间里使用某些自己的方法吗?只需简单地在 webpack.config.js 里设置 output.library:
    

    module.exports = {
    output: {
    library: 'myClassName',
    }
    };

    …这样就会把打包结果绑定到一个 window.myClassName
     实例上。所以使用这种命名作用域,就可以调用 entry 点里面的方法了(可以阅读[文档](https://webpack.js.org/concepts/output/#output-library)获取更多关于这个配置的信息)。
    
    ## 6. 加载器(Loaders)
    目前为止,我们所讲到的都是关于 JavaScript 代码的使用。从 JavaScript 代码开始是非常重要的,因为**这是 Webpack 唯一使用的语言**。我们可以处理任何文件类型,只要将它们传进 JavaScript 代码中。这个功能用 **Loaders** 来实现。
    
    一个 loader 可以指向一个像 Sass 的预处理器,或者像 Babel 的编译器。在 NPM 中,它们通常是像 sass-loader 或 babel-loader 这样命名为 *-loader。
    
    #### 6.1 Babel   ES6
    如果我们想要在项目中通过 Babel 来使用 ES6,首先要在本地正确地安装一些 loader:
    

    yarn add --dev babel-loader babel-core babel-preset-es2015

    …然后把它们添加进 webpack.config.js 好让 Webpack 知道哪里使用它们。
    

    module.exports = {
    // …

    module: {
    rules: [
    {
    test: /.js$/,
    use: [{
    loader: 'babel-loader',
    options: { presets: ['es2015'] }
    exclude: [/node_modules/],
    }],
    },

      // Loaders for other file types can go here
    ],
    

    },

    // …
    入门教程,请手写叁个webpack4。};

    一个给 Webpack 1 用户的提示:Loaders 的核心概念仍然是一样的,但语法上做了改进。在他们完成文档之前这可能不是确切的首选语法。
    
    这样做就可以为 /.js$/ 正则表达式寻找以 .js 结尾的文件,最后通过 Babel 编译加载。Webpack 依赖正则表达式给予你完整的控制 - 但它不会限制你的文件后缀,或者假设你的代码必须以某种特定形式组织起来。举个例子:也许你的 /my_legacy_code/ 文件夹里的代码不是用 ES6 写的,那么你就可以把上面的 test 修改为 /^((?!my_legacy_code).)*.js$/
    ,这样就可以绕过这个文件夹,其余文件用 Babel 编译。
    
    #### 6.2 CSS   Style Loader
    如果我们只想加载应用需要的 CSS,也可以那么做。假设有一个 index.js 文件,在里面引入:
    

    import styles from './assets/stylesheets/application.css';

    就会得到一个错误:You may need an appropriate loader to handle this file type。记住 Webpack 只能读取 JavaScript,所以我们必须安装正确的 loader:
    

    yarn add --dev css-loader style-loader

    然后在 webpack.config.js 里添加一个规则:
    

    module.exports = {
    // …
    module: {
    rules: [
    {
    test: /.css$/,
    use: ["style-loader", "css-loader"],
    },
    // …
    ],
    },
    };

    这些 loader 会以数组逆序运行。这意味着 css-loader 会在 style-loader 之前运行。
    
    你可能注意到甚至在生产构建的结果中,也把 CSS 打包进了 JavaScript 里面,并且 style-loader
     手动地将样式写进了 <head>
     中。乍一看这可能有点奇怪,但当你考虑足够多的时候就会慢慢发现这其实是有道理的。你保存了一个头部请求(在某些连接上节省宝贵的时间),并且如果你用 JavaScript 来加载 DOM,这么做基本上就消除了它自身的[无样式闪屏](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)问题。
    
    还注意到 Webpack 已经通过把所有文件打包成一个从而自动解决了所有的 @import
     查询问题(比起依赖 CSS 默认的引入导致不必要的头部请求和缓慢的资源加载,这么做显然更好)。
    
    从 JS 里加载 CSS 相当爽,**因为你可以用一种强有力的新方式去模块化 CSS 代码了**。假设你只通过 button.js 加载了 button.css,这就意味着如果 button.js 没有实际用到的话,它的 CSS 也不会打包进我们的生产构建结果。如果你坚持使用像 SMACSS 或者 BEM 那样的面向组件的 CSS,就会知道把 CSS 和 HTML   JavaScript 代码放更近的价值了。
    
    #### 6.3 CSS   Node modules
    我们可以在 Webpack 里用 Node 的 ~
     前缀去引入 Node Modules。假设我们提前运行了 yarn add normalize.css,就可以这么用:
    

    @import "~normalize.css";

    这样就可以全面使用 NPM 来管理第三方样式库(版本及其他)而对我们而言就无需复制粘贴了。更进一步的是,Webpack 打包 CSS 比使用默认的 CSS 引入有着显而易见的优势,让客户端远离不必要的头部请求和缓慢的资源加载。
    
    **更新:这个部分和下面的部分为了更准确都进行了更新,不用再困扰于使用 CSS Modules 去简单地引入 Node Modules 了。感谢 [Albert Fernández](https://medium.com/u/901a038e32e5) 的帮助!**
    
    #### 6.4 CSS Modules
    你可能已经听说过 [CSS Modules](https://github.com/css-modules/css-modules),它将 CSS(Cascading Style Sheets里的 C(Cascading)给提出来了。它只在用 JavaScript 构建 DOM 的时候使用有最佳效果,但本质上来说,它巧妙地将 CSS 在加载它的 JavaScript 里作用域化了([点击这个链接学习更多相关知识](https://github.com/css-modules/css-modules))。如果你计划使用它,CSS Modules 对应的 loader 是 
    `css-loader(yarn add --dev css-loader):`
    

    module.exports = {
    // …

    module: {
    rules: [
    {
    test: /.css$/,
    use: [
    'style-loader',
    {
    loader: 'css-loader',
    options: { modules: true }
    },
    ],
    },

      // …
    ],
    

    },
    };

    **注意:对于 css-loader
     我们使用了展开的对象语法来为它添加配置。你可以写简单的字符串代表使用默认配置,style-loader
     就还是这么做的。**
    
    值得注意的是实际上在使用 CSS Modules 引入 Node Modules 的时候可以去掉 ~ 符号(如 @import "normalize.css";)。但是,当 @import 你自己的 CSS 时可能会遇到错误。如果你得到了 “can’t find ___” 这样的错误,尝试添加一个 resolve 对象到 webpack.config.js 里,好让 Webpack 更好地理解你预期的模块顺序。
    

    module.exports = {
    //…

    resolve: {
    modules: [path.resolve(__dirname, './src'), 'node_modules']
    },
    };

    首先指定了我们自己的源文件目录,然后是 node_modules。这样子 Webpack 解决起来就会处理得更好一些,按照那个顺序先找我们的源文件目录,然后是已安装的 Node Modules(分别用你自己的源码和 Node Modules 目录替换其中的 src 和 node_modules)。
    
    #### 6.5 Sass
    想用 Sass?没问题,安装:
    

    yarn add --dev sass-loader node-sass

    然后添加另一条规则:
    

    module.exports = {
    // …

    module: {
    rules: [
    {
    test: /.(sass|scss)$/,
    use: [
    'style-loader',
    'css-loader',
    'sass-loader',
    ]
    }

      // …
    ],
    

    },
    };

    接下来当 JavaScript 调用 import 引入一个 .scss 或 .sass 文件时,Webpack 就会做它该做的事情了。
    
    #### 6.6 分开打包 CSS
    或许你正在处理渐进式增强的网站,又或许因为其他的原因你需要一个分离的 CSS 文件。我们可以简单地实现,只需要在配置里用 extract-text-webpack-plugin 替换掉 style-loader,而无需改变其他任何代码。以 app.js 文件为例:
    

    import styles from './assets/stylesheets/application.css';

    本地安装插件(我们需要这个的测试版本,2016年10月发布):
    

    yarn add --dev extract-text-webpack-plugin@2.0.0-beta.4

    添加到 webpack.config.js:
    

    const ExtractTextPlugin = require("extract-text-webpack-plugin");
    module.exports = {
    // …
    module: {
    rules: [
    {
    test: /.css$/,
    loader: ExtractTextPlugin.extract({
    loader: 'css-loader?importLoaders=1',
    }),
    },
    // …
    ]
    },
    plugins: [
    new ExtractTextPlugin({
    filename: "[name].bundle.css",
    allChunks: true,
    }),
    ],
    };

    现在运行 webpack -p 的时候就可以看到一个 app.bundle.css 文件出现在 output 目录里了。像往常一样简单地添加一个 <link> 标签到 HTML 文件里就可以了。
    
    #### 6.7 HTML
    你可能已经猜到,Webpack 还有一个 [html-loader 插件](https://github.com/webpack/html-loader)。但是,当我们开始用 JavaScript 加载 HTML 的时候,这其实是一个可以分支成不同方法的地方,而且我想不到一个单独的简单示例可以覆盖所有下一步操作的可能性。通常,你可能会在用 [React](https://facebook.github.io/react/)、[Angular](https://angularjs.org/)、[Vue](http://vuejs.org/) 或者 [Ember](http://emberjs.com/) 构建的大型系统中加载诸如 [JSX](https://jsx.github.io/)、[Mustache](https://github.com/janl/mustache.js/) 或者 [Handlebars](http://handlebarsjs.com/) 这样偏向 JavaScript 的模板 HTML;或者你可能使用一个像 [Pug](https://github.com/pugjs/pug-loader)(以前的 Jade)或者 [Haml](https://github.com/AlexanderPavlenko/haml-loader) 这样的 HTML 预处理器;或者你可能只是想简单地将源文件目录里的 HTML 复制到构建结果目录里。不管你想做什么,我没办法假设。
    
    所以我准备在此结束本教程:你可以用 Webpack 加载 HTML,但这一点你必须自己根据你的架构做出决策,不管是我还是 Webpack 都没办法帮到你。不过使用上述例子作为参考并在 NPM 上找到正确的 loader 应该足够让你继续下去了。
    
    ## 7. 从模块角度思考
    #### 7.1 从模块角度思考
    为了最大程度发挥 Webpack 的作用,你不得不从模块的角度去思考(小、可复用、自包含进程),一件件事情慢慢去做好。这意味着下面这样的东西:
    

    └── js/
    └── application.js // 300KB of spaghetti code

    把它变成:
    

    └── js/
    ├── components/
    │ ├── button.js
    │ ├── calendar.js
    │ ├── comment.js
    │ ├── modal.js
    │ ├── tab.js
    │ ├── timer.js
    │ ├── video.js
    │ └── wysiwyg.js

    └── application.js // ~ 1KB of code; imports from ./components/

    结果是干净且可复用的代码。每个独立的组件取决于导入自身的依赖,并按照它想要的方式导出到其他模块。配合 Babel   ES6 使用,还可以利用 [JavaScript Classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes) 做出更好的模块化,并且**不要去想它**,作用域只是在起作用。
    
    想知道更多关于模块的内容,可以看这篇 Preethi Kasreddy 写的很棒的[文章](https://medium.freecodecamp.com/javascript-modules-a-beginner-s-guide-783f7d7a5fcc)。
    
    ## 8. 延伸阅读
    #### 8.1 延伸阅读
    * [What’s New in Webpack 2](https://gist.github.com/sokra/27b24881210b56bbaff7)
    * [Webpack   PostCSS   cssnext](https://blog.madewithenvy.com/webpack-2-postcss-cssnext-fdcd2fd7d0bd#.asbpg46l1)
    * [Webpack Config docs](https://webpack.js.org/configuration/)
    * [Webpack Examples](https://github.com/webpack/webpack/tree/master/examples)
    * [React   Webpack Starter Kit](https://github.com/kriasoft/react-starter-kit)
    * [Webpack How-to](https://github.com/petehunt/webpack-howto)
    

    ✍️Html在webpack中的配置

    在类型的根目录try-webpack下新建webpack.config.js文件,以commonJS模块化学工业机械制向外输出,况兼新建贰个index.html。

    module.exports = {}

    布署我们的入口entry,在vue-cli里相当于跟目录下的main.js,我们的出口output。大家能够把webpack精通为多少个厂子,步入也就是把丰富多彩的原料放进咱们的厂子了,然后工厂开展一文山会海的包裹操作把打包好的东西,向外输出,然后就能够去贩卖了(上线)。

    JavaScript

    const path = require('path'); //引进大家的node模块里的path //测量试验下 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' //文件名[name].js暗中同意,也可自动安顿 },

    1
    2
    3
    4
    5
    6
    7
    8
    const path = require('path'); //引入我们的node模块里的path
    //测试下 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' //文件名[name].js默认,也可自行配置
        },

    HTML打包大家需求设置引进html-webpack-plugin

    JavaScript

    yarn add html-webpack-plugin -D //在开采条件中安装 const HtmlWebpackPlugin = require('html-webpack-plugin') //引入打包大家的HTML

    1
    2
    yarn add html-webpack-plugin -D //在开发环境中安装
    const HtmlWebpackPlugin = require('html-webpack-plugin')  //引入打包我们的HTML

    在module.exports里铺排大家的plugins(插件):

    JavaScript

    plugins: [ //插进的援引, 压缩,分离美化 new HtmlWebpackPlugin({ //将模板的头顶和背后部分增多css和js模板,dist 目录宣布到服务器上,项目包。能够一向上线 file: 'index.html', //塑造单页面运用 最终运转的不是其后生可畏 template: 'src/index.html' //vue-cli放在跟目录下 }), ],

    1
    2
    3
    4
    5
    6
    plugins: [  //插进的引用, 压缩,分离美化
            new HtmlWebpackPlugin({  //将模板的头部和尾部添加css和js模板,dist 目录发布到服务器上,项目包。可以直接上线
                file: 'index.html', //打造单页面运用 最后运行的不是这个
                template: 'src/index.html'  //vue-cli放在跟目录下
            }),
        ],

    布局好后,在终点输入npm run dev后webpack将大家的html打包好还要自动将大家的js引入来了。

    <body> <p class="main">Hello World</p> <script type="text/javascript" src="main.js"></script> </body>

    1
    2
    3
    4
    <body>
        <p class="main">Hello World</p>
    <script type="text/javascript" src="main.js"></script>
    </body>

    live-sever我们的dist目录,运转多个8080端口,我们就足以观察我们的Hello World了。那正是大家上线版的页面。

    npm install webpack --save-dev

    1. 入口(entry卡塔尔:告诉webpack打包从何地先导
    2. 出口(output卡塔 尔(英语:State of Qatar):如什么地点理打包代码及包裹输出到怎么样地方
    3. 加载器(loaders卡塔尔:通过loader识别出各类能源,将这几个文件转变为模块
    4. 插件(plugins卡塔 尔(英语:State of Qatar):由于加载器仅依照单个文件实行调换,插件能够做一些更目眩神摇的操作及自定义功效

    css在webpack中的配置

    在我们vue-cli里,大家能够利用css去写咱俩的体裁,也能够运用高等stylus,less,sass等预编写翻译器。这里就以less为例,看看webpack怎么将她打包成一个css。

    CSS

    .main { color: red; }

    1
    2
    3
    .main {
      color: red;
    }

    在src目录下新建大家的style.less文件,在布局早前大家要求npm大家的css-loader和sass-loader, sass

    yarn add css-loader less less-loader style-loader -D

    进行完上述命令大家在packge.json里能够见到我们的配置文件

    JavaScript

    "devDependencies": { "css-loader": "^1.0.0", "html-webpack-plugin": "^3.2.0", "sass": "^1.9.0", "sass-loader": "^7.0.3", "webpack": "^4.16.0", "webpack-cli": "^3.0.8" }

    1
    2
    3
    4
    5
    6
    7
    8
    "devDependencies": {
        "css-loader": "^1.0.0",
        "html-webpack-plugin": "^3.2.0",
        "sass": "^1.9.0",
        "sass-loader": "^7.0.3",
        "webpack": "^4.16.0",
        "webpack-cli": "^3.0.8"
      }

    设置好后,大家开头布局webpack.config.js文件。这里说贝拉米(Bellamy卡塔尔(Nutrilon卡塔尔国下,大家的css在dist目录下要求和大家的HTML分离,那是还需引进大家的extract-text-webpack-plugin,先然我们设置下

    yarn add extract-text-webpack-plugin -D

    那边有三个坑,extract-text-webpack-plugin在4.0并不辅助那样的装置,大家可自行chrome。于是大家选取换黄金时代种艺术,接纳4.00-beta.0本子的

    yarn add extract-text-webpack-plugin@last -D

    到来我们的module.exports里,完结moudel的布局

    JavaScript

    const ExtractTextPlugin = require('extract-text-webpack-plugin') //打包的css拆分,将风华正茂部分分离出来 module: { //模块的连带安顿 rules: [ //依据文件的后缀提供二个loader,解析准则 { test: /.less$/, //正则特出大家以.less结尾的文件 use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: [ 'css-loader', 'less-loader' ] }) }, ]}, plugins:[ new ExtractTextPlugin('[name].css'), //[name] 暗中同意也得以自定义name 表明使用 ]

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    const ExtractTextPlugin = require('extract-text-webpack-plugin')     //打包的css拆分,将一部分抽离出来  
    module: {       //模块的相关配置
          rules: [     //根据文件的后缀提供一个loader,解析规则
              {
                  test: /.less$/, //正则匹配我们以.less结尾的文件
                  use: ExtractTextPlugin.extract({
                      fallback: 'style-loader',
                      use: [
                      'css-loader',
                      'less-loader'
                      ]
                  })
              },
          ]},
       plugins:[
          new ExtractTextPlugin('[name].css'),  //[name] 默认  也可以自定义name  声明使用
       ]

    我们在实行大家的npm run build之后并不曾我们的css,为啥吧?原本在webpack配置里css in js。意思是在卷入是大家的css是包装在大家的js里的,全部大家引进了extract-text-webpack-plugin插件将css从里面剥离出来。不过又多个难点,require的建制?

    在大家打包进程中,文件的援引require 根据顺序来打包,那就是文件依赖的机制。

    打包好后我们在live-server,开掘大家的体裁也上来了,並且css部分分离出来了。

    webpack -v //查看版本

    简短铺排

    js在webpack中的配置

    明天随着es6的推广,更加多的代码应用es6了,不过众多浏览器并不补助es6,譬如async/awiat,const。因此须求我们援用babe来把我们es6的代码编写翻译为es5。在跟目录下新建.babelrc,简单安排下

    {“presets”: [“env”]}

    设置大家的babel并在webpack.config.js里module/rules下进行配备

    JavaScript

    yarn add babel-loader babel-core abel-preset-env -D //babel基本的四个公文 { test: /.js$/, //es6 => es5 include: [ path.resolve(__dirname, 'src') ], // exclude:[], 不匹配选项(优先级高于test和include卡塔尔 use: 'babel-loader' },

    1
    2
    3
    4
    5
    6
    7
    8
    9
    yarn add babel-loader babel-core  abel-preset-env -D  //babel基本的三个文件
    {
        test: /.js$/,  //es6 => es5
        include: [
            path.resolve(__dirname, 'src')
        ],
        // exclude:[], 不匹配选项(优先级高于test和include)
        use: 'babel-loader'
    },

     

    module.exports = {
        entry: './src/main.js',
        output: {
            filename: './dist/bundle.js'
        }
    }
    

    图形能源在webpack中的配置

    在src目录下新建一个assets文件,里面放置几张图片。安装file-loader依据文件地点加载文件

    yarn add file-loader -D
    在webpack.config.js里module/rules

    JavaScript

    { test: /.(png|jpg|gif)$/, //相称全数格式的图纸财富 use: [ { loader: 'file-loader' } ] }

    1
    2
    3
    4
    5
    6
    7
    8
    {  
        test: /.(png|jpg|gif)$/, //匹配所有格式的图片资源
        use: [
            {
                loader: 'file-loader'
            }
        ]
    }

    在极限中的语法:

    运行

    小名(@)在webpack中的配置

    在src/index.js里我们引进

    JavaScript

    const format = require('utils/format') // utils ? 未有相对路线 回看@ => 别称 在src新建相应的公文。在format.js里选拔八个参数并把它转成大写 module.exports = function format(chars) { return chars.toUpperCase() }

    1
    2
    3
    4
    5
    const format = require('utils/format')  // utils ?  没有相对路径  回想@  => 别名
    在src新建相应的文件。在format.js里接受一个参数并把它转成大写
    module.exports = function format(chars) {
        return chars.toUpperCase()
    }

    在webpack中怎么着布署我们的别称呢?在vue-cli中大家平时@三个文书夹,其意思正是在src目录下,今后大家去朝气蓬勃探终归。在module下,注意跟rules同级

    JavaScript

    resolve: { //深入解析模块的可选项 // modules: [ ]//模块的寻找目录 配置别的的css等文件 extensions: [".js", ".json", ".jsx",".less", ".css"], //用到文件的恢宏名 alias: { //模快外号列表 utils: path.resolve(__dirname,'src/utils') } },

    1
    2
    3
    4
    5
    6
    7
    resolve: { //解析模块的可选项  
            // modules: [ ]//模块的查找目录 配置其他的css等文件
            extensions: [".js", ".json", ".jsx",".less", ".css"],  //用到文件的扩展名
            alias: { //模快别名列表
                utils: path.resolve(__dirname,'src/utils')
            }
        },

    webpack {entry file} {destination for bundled file}

    webpack
    dist目录下生成bundle.js文件
    webpack别的参数

    其它一些静态财富在webpack中的配置

    • src下其它的文件直接复制到dist目录下,却非各个文件都急需打包管理的,相当多财富恐怕一直就足以复制过去。使用大家的 CopyWebpackPlugin插件
    • 引用框架 jquery lodash工具库是众多零件会复用的,省去了import。使用webpack.ProvidePlugin插件

    e.g. webpack src/entry.js dist/bundle.js

    • webpack -p – 实行优化压缩处理,也正是设置process.env.NODE_ENV="production"
    • webpack --watch – 持续监听营造
    • webpack -d – debug模式,包含source maps
    • webpack --display-error-details - 显示详细的打包出错消息
    • webpack -h 查看越来越多的音信,不足为道的还也许有--colors,--progress
    • webpack --config XXX.js //使用另意气风发份配置文件(譬喻webpack.config2.js卡塔 尔(英语:State of Qatar)来打包
      加载越多能源 –使用loader

    五、npm run dev 产生了怎么着

    在vue-cli中大家运行监听npm run dev可以天天监督大家src下文件的改观,那他到底产生了什么吗。在webpack里实际创设了一个node进度,通过webpack-dev-server其内部封装了七个node的express模块,其布置项如下

    JavaScript

    "scripts": { //在package.json里声称下选用脚本 npm run dev "build": "webpack --mode production", "start": "webpack-dev-server --mode development" }, devServer: { //在webpack.config.js里布署port port: '8080', before(app) { app.get('/api/test.json', (req, res) => { res.json({ code: 200, message: 'Hello World' }) }) } } //服务于webpack-dev-server 内部封装了一个express

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    "scripts": { //在package.json里声明下使用脚本 npm run dev
        "build": "webpack --mode production",
        "start": "webpack-dev-server --mode development"
      },
    devServer: {  //在webpack.config.js里配置port
            port: '8080',
            before(app) {
                app.get('/api/test.json', (req, res) => {
                    res.json({
                        code: 200,
                        message: 'Hello World'
                    })
                })
            }
        }  //服务于webpack-dev-server  内部封装了一个express


    图片 12

     

    栗子:

    寄语

    webpack里面博大精深,那只是刚入门。要钻探当中间确实的东西,而不是一时三刻。tapable、webpack的生命周期等等。倘诺您想深切的掌握webpack,推荐腾讯ivweb团队至于webpack的深入商量。那也是本身近年在看的,独有精通更加的多,你能力飞的更远。夜深了,时间过的比一点也不慢。楼主也太困了,停笔于此,望多多蕴含。附上自身github关于webpack4.0配置的上学demo点这里。

    1 赞 3 收藏 评论

    图片 13

    2.webpack.config.js

    {
    test: /.js$/, 
    loader: 'babel-loader', 
    include: path.resolve(__dirname, 'src'),
    exclude: /node_modules/,
    

     

    }
    loader是相比基本的一块内容,它将每一种静态财富通过loader调换为js模块,多个loader富含以下几有的

    //引用Node中的path模块

    test: 叁个相配loaders所管理的公文的拓宽名的正则表明式(必得卡塔尔国
    loader: loader的名称(必须)
    include/exclude: 增多必得管理的文书(文件夹卡塔尔或屏蔽无需管理的公文(文件夹卡塔 尔(英语:State of Qatar)(可选卡塔尔国
    query: 为loaders提供额外的安装选项(可选卡塔尔
    1.ES6语法的js babel-loader

    const path = require('path');

    babel-loader安装相应的包

    module.exports={

    npm i babel-loader -D
    安装babel-core和babel-preset-es2016,将ES6的代码调换来ES5

    //入口文件配置

    npm i babel-core babel-preset-es2015 -D
    在module.rules中添加loader节点

    entry:{

    module: {
    rules: [{
    test: /.js$/,
    loader: 'babel-loader',
    query: {presets: ['es2015']}
    }]
    }

    entry:'./src/entry.js'

    1. 样式 css-loader,style-loader

    },

    src/assets/css下新建style.css

    //出口文件配置

    body {
    background-color: #ff0;
    }
    main.js中引进css财富,会报错,因为未有对应的loader进行管理

    output:{

    require(‘./assets/css/style.css’)
    添加loader处理

    path:path.resolve(__dirname,'dist'),

    npm i css-loader style-loader -D

    filename:'bundle.js'

    {
    test: /.css$/,
    loader: ‘style-loader!css-loader’
    }
    在编写翻译的js代码中大家能够见见

    },

    / 4 /
    /***/ (function(module, exports, __webpack_require__) {

    //模块,比方解读CSS,图片怎么样改变,压缩

    exports = module.exports = __webpack_require__(1)(undefined);
    // imports

    module:{},

    // module
    exports.push([module.i, "body {n background-color: #ff0;n}n", ""]);

    //插件,用于临蓐模板和各样机能

    // exports

    plugins:[],

    /***/ }),

    //配置webpack开拓服务成效

    1. 图片 file-loader url-loader

    devServer:{}

    url-loader是对file-loader的封装

    }

    npm i file-loader url-loader -D

     这么些代码写完后,可以在终端中一直输入webpack就能够进展包装。

    {test: /.(png|jpg)$/, loader: “url-loader?limit=8192”}
    如此那般会将小于8kb的图形直接以base64的格式内嵌到代码中,在任其自然水平上减少小图片的央浼
    main.js中增多代码

    多入口文件:

    let img1 = document.createElement('img')
    img1.src = require('./assets/img/icon.png')
    document.body.appendChild(img1)
    更多的loaders:

    图片 14

    启多少个劳动webpack-dev-server

     

    dist下新建index.html

    3.设置webpack-dev-server

    <!DOCTYPE html>
    <html>
    <head>
    <title>webpack demo page</title>
    </head>
    <body>
    <script src="/dist/bundle.js"></script>
    </body>
    </html>
    设置相应的包

     

    npm i webpack-dev-server -D
    model下拉长配置

    npm install webpack-dev-server --save-dev

    devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: false,
    inline: true,
    port: 8080
    }
    运行

     

    node_modules/.bin/webpack-dev-server
    打开 页面变为×××
    我们能够将以此本子放在package.json中

    /webpack.config.js:

    "scripts": {
    "start": "node_modules/.bin/webpack",
    "serve": "node_modules/.bin/webpack-dev-server"
    }

    devServer:{

    诸如此比大家得以一贯运维

    contentBase:path.resolve(__dirname,'dist'),

    npm run serve
    步入进程守护nodemon

    host:'localhost',

    "scripts": {
    "start": "nodemon --exec webpack -w webpack.config.js",
    "serve:watch": "nodemon --exec webpack-dev-server -w webpack.config.js"
    }
    页面实时刷新 Hot Module Replacement(HM科雷傲) 热加载

    compress:true,

    It’s like LiveReload for every module.
    当模块产生变化时,内部存款和储蓄器中的bundle会收到公告,假如不影响到一切页面包车型大巴变动,只会刷新局地,而不用刷新整个页面。
    设置hot为true
    devServer: {
    contentBase: path.join(__dirname, ''),
    compress: true,
    inline: true,
    hot: true, **
    port: 8080
    },
    2.添加到pligins中

    port:1717

    plugins: [
    new webpack.HotModuleReplacementPlugin() //热加载插件
    ],

    }

    chrome调控台张开大家能够看出,表达HM哈弗已经张开
    [HMR] Waiting for update signal from WDS...
    [WDS] Hot Module Replacement enabled.
    附:webpack改革每一趟都重启?nodemon守护

    在终点中输入 webpack-dev-server 。也得以在package.json中'scripts'写'server':'webpack-dev-server',然后npm run server;

    nodemon进度守护,用来监督你node.js源代码的其他改动,自动重启服务

     

    npm i nodemon -g
    nodemon - -exec webpack -w webpack.config.js
    此间我们只必要监听webpack.config.js文件的成形,所以加多-w参数钦点特定的目录可能文件

    4.Loaders

    进阶

    Loaders是webpack的首要职能,通过接收区别的loader,webpack能够对分裂文件格式进行一定管理。

    目录结构

    比如:可以把SASS文件写法调换到CSS,而不在使用此外调换工具。

    ├── src
    │ ├── main.js --主入口
    │ ├── assets
    │ │ ├── css
    │ │ └── img
    │ ├── libs
    │ │ └── util.js --公共措施
    │ ├── modules
    │ │ ├── login.js --登陆页面
    │ │ └── product.js --商品页面
    ├── README.md
    ├── index.html
    ├── package.json
    ├── webpack.config.js
    └── yarn.lock

                能够把ES6,ES7代码,转变到大超多浏览器宽容的JS代码。

    1. 多页应用

                可以把React中的JSX转换成Javascript代码

    entry的配备大家可以是string,object,array类型,后面包车型客车例证用到的是string,单个入口,未来我们加多了几个目录及文件

    潜心:全部的Loaders都亟待在npm中单独安装,并在webpack.config.js中进行配置

    entry: {
    main: './src/main.js',
    login: './src/modules/login.js',
    product: './src/modules/product.js'
    }
    地方的输入文件都在src目录下,那么能够安装三个根底目录,相对路线,用于从计划中深入分析入口源点(entry point)和加载器(loader)

    示例

    context
    The base directory (absolute path!) for resolving the entry option. If output.pathinfo is set, the included pathinfo is shortened to this directory.
    进口文件的根底目录(相对路线!卡塔尔国。即使output.pathinfo设置,值为到该目录的渠道。
    更加多webpack底子配置
    context: path.resolve(__dirname, 'src'),
    entry: {
    main: './main.js',
    login: './modules/login.js',
    product: './modules/product.js'
    }
    就算是数组,那么会将数组中的模块合併,而且输出最终多个;要是是object,那么八个输入的key会打包成包的chunk名称。

    在src/css文件夹下构建叁个index.css

    output: {
    path: path.join(__dirname, 'dist'),
    publicPath: '/',
    filename: '[name]-[hash:8].js',
    chunkFilename: '[id]-[chunkhash].js'
    }
    跑webpack会见到dist下生成login-5ccbce5e.js,main-5ccbce5e.js,product-5ccbce5e.js多少个文件

    接下来在/src/entry.js中首行参与代码:import css from './css/index..css';

    1. 轻便文件增添名?resolve.extensions

    npm install style-loader --save-dev

    可以间接写util,而不用util.js, vue文件也能够省略文件名

    npm install css-loader --save-dev

    resolve: {
    extensions: ['', '.js', '.vue']
    }

    引进代码压缩模块,const uglify = require('uglifyjs-webpack-plugin'); 然后在plugins new uglify();

    1. 文件查找的路径太长?resolve.alias削减援引路线

      resolve: {
      extensions: ['.js', '.css'] ,
      alias: {
      'libs': path.resolve(__dirname, 'src/libs'),
      'react': 'node_modules/react/react.js'
      }
      与上述同类在src下的此外js文件都足以从来这样引进模块,而不用../libs/util

    图片 15

    import { ajax } from ‘libs/util’
    活动引进vue/jquery ?ProvidePlugin

     

    机关加载模块,ProvidePlugin能够让大家无需引进的情况下,以大局的形式直接使用模块变量

    5.打包HTML文件

    new webpack.ProvidePlugin({
    Vue: ‘Vue’
    })
    代码中得以毫不引进vue直接使用vue

    假设src目录中有个index.html 这些HTML文件不应当包涵别的script引进标签,因为其后生可畏任务应该提交webpack来实行:

    原地址:

    在webpack.config.js中,先引入我们的html-webpack-plugin

    const htmlPlugin = require('html-webpack-plugin');

    引进后用npm实行设置

    npm install html-webpack-plugin -save-dev

    最终在webpack.config.js里对plugins进行插件配置

    new htmlPlugin({

              minify:{ removeAttributeQuotes:true},

              hash:true,

              template:'./src/index.html'

    })

    .. 终端中输入webpack, 在dist文件夹下查看已经退换的文书

     

    6.CSS中图纸的处理

    举例HTML中有<div>里面包车型地铁background是url图片地址,

    直接用webpack是会报错的,需求动用file-loader和url-loader

    npm install file-loader url-loader --save-dev

     

    *url-loader已经封装了file-loader的功效(作者也不懂为何要分开装。。反正上面说这就那样吗卡塔尔

    图片 16

     

    option中的limit会对图片大小决断,倘使是5000b以下则会动用Base64编码(也便是一大串乱码卡塔 尔(英语:State of Qatar)

     

    图片 17

     

    7.CSS分离

    实则开销中恐怕必要大家单独分离出CSS样式

    直接使用npm install安装就足以。

    npm install --save-dev extract-text-webpack-plugin

    设置后在webpack.config.js中用require引进

    const extractTextPlugin = require('extract-text-webpack-plugin');

    在plugins属性中实行配置

    new extractTextPlugin('/css/index.css')

    接下来改正一下原先大家的style-loader和css-loader

    图片 18

    运行webpack实行李包裹装,dist目录下会生成css文件夹

     

    那样的话图片是不会来得的,有多少个相比较通用的解决方式是:

    图片 19

     

    8.HTML中图纸打包

    1.哪些行使本地意况下的webpack呢?

    答:在package.json的"script"中写后生可畏行 "build":"webpack",然后npm run build

    2.什么让打包的图形也能在某些文件夹内输出?

    答:在url-loader的options里写风度翩翩行outputPath:'images/'(比如limit:5000,outputPath....)

     

    Webpack官方不推荐你利用img标签,而是愿意您完全使用Javascript,

    假定接收了带src属性的img标签,那么打包出来的图样是不会显得的。

    有风度翩翩款国人的插件 html-withimg-loader

     

    9.打包和抽离LESS,SASS

     

    1.怎么让webpack-dev-server自动在新的竹签页弹出

    答:在package.json的“scripts”中 "server":"webpack-dev-server --open" 加上--open那个参数

     

     

    LESS:

    npm install less --save-dev

    npm install less-loader --save-dev

     

    对webpack.config.js实行布局

    {

    test:/.less$/,

    use:[{

    loader:"style-loader"

    },{

    loader:"css-loader"

    },{

    loader:"less-loader"

    }]

    }

     

    在src/css下树立less文件进行编写制定,在entry.js中import less from './css/xxx.less'

    进行webpack打包

     

    设置抽离:

    图片 20

    分别后张开dist/css/index.css就会窥见已经改动好了。

     

    SASS:

    npm install --save-dev node-sass sass-loader

    npm install --save-dev sass-loader

     

     

    {

    test:/.scss$/,

    use:[{

    loader:"style-loader"

    },{

    loader:"css-loader"

    },{

    loader:"sass-loader"

    }]

    }

     

    告别代码:

    {

    test:/.scss/,

    use:extractTextPlugin.extract({

    use:[{

    loader:"css-loader"

    },{

    loader:"sass-loader"

    }],

    fallback:"style-loader"

    })

    }

     

     

     

    10.POSTCSS的使用

    浏览器的木本:

    1.IE Trident
    2.Safari Webkit
    3.Chrome Blink
    4.Firefox Gecko
    5.Opera Presto

     

    postcss-loader效率是给css3属性加一下浏览器宽容的前缀

     

    npm install --save-dev(-D) postcss-loader autoprefixer

     

    在webpack.config.js同级目录下新建postcss.config.js 

    module.exports={

    plugins:[

    require('autoprefixer'),

    ]

    }

     

    图片 21

     

     

    11.PurifyCSS的使用

     

    npm i -D purifycss-webpack purify-css

    (npm install --save-dev purifycss-webpack)

    (npm install --save-dev purify-css) 

    (必定要设置那四个,因为前面包车型地铁依据后边的)

     

    const PurifyCSSPlugin = require("purifycss-webpack");

    const glob = require('glob');

     

    new PurifyCSSPlugin({

    paths:glob.sync(path.join(__dirname,'src/*.html'))

    })

     

    实行webpack打包,假如css中写了剩余代码而没用到,那么在dist生成的css中则不会有这段冗余的代码

     

     

    12.babel的使用

     

    npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react

     

    {

    test:/.(jsx|js)$/,

    use:{

    loader:"babel-loader",

    options:{

    presets:["es2015","react"]

    }

    },

    exclude:/node_modules/

    }

     

    npm run build

     

    因为前期babel配置项恐怕会非常多,不建议直接写在webpack.config.js的options中

     

    提议新建三个.babelrc进展配置

     

    babelrc里传到多个目的:

    图片 22

     

    (这里写错了,应该是presets,懒得截图了卡塔 尔(阿拉伯语:قطر‎然后npm run build,也打包成功了。

     

     

    *一时官方推荐的风靡的调换器是babel-preset-env,能够调换es7,es8...

     

    npm install --save-dev babel-preset-env

     

    然后校勘.babelrc

    图片 23

    下一场用webpack打包,也不负职分了。

     

     12.DEV-TOOLS

     

    source-map 独立 map 行 列(第五行第22个字符错误卡塔尔国

    cheap-module-source-map 独立 行 不包含列(第五行有荒诞卡塔尔国

    都生成独立文件

     

    例如

    图片 24

     

    用webpack打包,在dist目录下会有entry.js.map那些独立的文书。

     

    eval-source-map 或许会有质量和日喀则的带有(在开拓阶段用,不要在生育上线阶段用卡塔 尔(英语:State of Qatar) 行 列

    cheap-module-eval-source-map  行 不包含列

     

     

     13.注重及分娩、开垦条件

     

    npm install --save-dev jQuery 开荒条件

    npm install --save jQuery 分娩境遇

     

    npm install --production 只设置package.json分娩情状中的信任包

     

    生育条件的及支出条件的计划:

    package.json 注意那些语法, set type=xxx&webpack 

    图片 25

     

    webpack.config.js 

    图片 26

     

     

     14.webpack模块化开采

     

    比如在src下新建多个alert.js:

    function a(){

    alert('哈!')}

     

    module.exports = a;

     

    在entry.js中引入import ss from './alert.js';

    ss();

     

    npm run dev...

    npm run server...

     

     

    在目录下创造三个空文件夹webpack_config,

    能够将webpack模块化配置写在那地。

     

    在中间新建一个entry_webpack.js

    const entry = {};

    entry.path = {

         entry: './src/entry.js'

    }

     

    module.exports = entry;

     

    在webpack.config.js中:

    const entry = require('./webpack_config/entry_webpack.js');

     

    下一场开展配备:

     

    图片 27

     

     14.打包第三方类库

     

    npm install --save jquery

    在entry.js中,import $ from 'jquery',写一些jquery代码。

    包裹后就意识能够运作Jq代码了。

     

    再有生龙活虎种方式引进:

    在webpack.config.js中:

    const webpack = require('webpack');

    使用webpack.ProvidePlugin 

    图片 28

     

     

     15.webpack --watch配置项(热打包)

     

     图片 29

    webpack --watch

     

     

    版权banner插件的选用:

    首先要const webpack = require('webpack');

    图片 30

     

    效果:

    图片 31

     

    15.webpack 优化

     

    如今学了三种引用Vue和jquery的方法,

     

    第后生可畏种是在entry.js中import,然后使用。

     

    其次种是在plugins中 

    new webpack.ProvidePlugin({

    $:"jquery"

    }),

     

    假诺entry.js中没用到Jquery语法的代码的话第风流罗曼蒂克种方法打包后照旧占领空间。

    其次章方法倘若把这段注释掉就不占用空间了。

    此地上学生龙活虎种分离插件的点子。

     

    抽离插件,入口处写法:

     

    图片 32

     使用webpack.optimize.CommonsChunkPlugin,

    图片 33

    运行webpack命令

    16.聚齐拷贝静态财富

    npm install --save-dev copy-webpack-plugin

    const copywebpackPlugin = require('copy-webpack-plugin');

    配置:

     

     图片 34

    热更新:

    new webpack.HotModuleReplacementPlugin()

     

    本文由新葡亰496net发布于新葡亰官网,转载请注明出处:入门教程,请手写叁个webpack4

    关键词: