脚本宝典收集整理的这篇文章主要介绍了

webpack学习

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

全局安装安装webapck

npm i webpack -g

现在我们就可以全局的使用webpack命令了

webpack中基础的命令:

webpack enter.js output.js --watch

这个命令是将enter.js打包成output.js,然后html只需要引用该文件就可以了
看如下entry.js,这是简单的js代码。

// 这边是处理js逻辑
let people = require('./people')
let $ = require('jquery')

$.each(people, function(key, value){
    $('body').append('<h1>'+people[key].name+'</h1>')
})

那么如何来打包css文件呢,只需要将css也引入到enter.js即可,这样跟文件index.html还是只需要引用output.js即可
引入css需要几个插件;css-loader, style-loader(由于是静态文件,需要编译)

require('!style-loader!css-loader!./style.css')

以上为简单的打包;如果需要复杂的工程的话,webpack推荐使用配置文件来配置
webpack的配置文件必须是webpack.config.js
上面的配置只需要这样写

module.exports = {
    // 入口文件
    entry: './app.js',
    // 出口文件
    output: {
        path: __dirname,
        filename: 'bundle.js'
    },
    // 需要依赖的插件或装载器
    mudule: {
        loader: [
            {
                test: /.css$/,
                loader: 'style-loader!css-loader'
            }
        ]
    }
}

以下是一个简易的开发目录
图片描述

针对该目录配置文件如下
ps: 需要将es6转码需要安装 babel-core,babel-loader,babel-env,babel-preset-es2015

module.exports = {
    // 入口文件
    entry: '.src/js/app.js',
    // 出口文件
    output: {
        path: __dirname,
        filename: 'bundle.js'
    },
    // 需要依赖的插件或装载器
    mudule: {
        loader: [
            // css加载
            {
                test: /.css$/,
                loader: 'style-loader!css-loader'
            },
            // es6转码为es2015
            {
                test: /.js/,
                loader: 'babel-loader',
                query: {
                    presets: ['es2015']  // ps这一块也可以写在.babelrc文件下
                },
                exclude: /node_modules/
            }
        ]
    },
    // 自动生成html文件,会引入js
    plugins: [
        new webpack.optimize.UglifyJsPlugin(),
        new HtmlWebpackPlugin({template: './index.html'})
    ]
}

总结

以上是脚本宝典为你收集整理的

webpack学习

全部内容,希望文章能够帮你解决

webpack学习

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过