webpack学习笔记

webpack是一款强大的前端工具,他可以帮助我们更好的构建代码

webpack安装:

npm install webpack -g

生成webpack.config.js文件

touch webpack.config.js

打开文件复制配置项

module.exports= {
    devtool: 'sourcemap',
    entry:'./js/entry.js',
    output:{
        filename:"bundle.js"
    }
};

entry为入口文件,filename为生成的文件名称

安装第三放js库 (举例为jQuery)

npm install jquery --save-dev


loaders使用 将css样式打包进去

安装cssloder 

npm install css-loder style-loder --save-dev


css-loader style-loader babel-core babel-loader babel-plugin-transform-runtime babel-preset-es2015 babel-preset-stage-0 babel-runtime --save-dev


npm install vue-template-compiler vue vue-loader vue-html-loader vue-style-loader --save-dev


module: {
       rules: [
            {
                test: /\.css$/,
                use: [
                    {
                        loader: "style-loader"
                    },
                    {
                        loader: "css-loader",
                        options: {
                            modules: true
                        }
                    }
                ]
            },
            {
                test: /\.jsx$/,
                loader: "babel-loader", // Do not use "use" here
                exclude: /node_modules/,
                options: {
                    presets: ['es2015','stage-0'],
                    plugins: ['transform-runtime']
                }
            }
        ]
    },

webpack --display-modules --display-reasons(打印引进了那些js,和引进路径)

热加载

npm install webpack-dev-server webpack-dev-middleware webpack-hot-middleware --save-dev

安装完成后的热加载命令

webpack-dev-server --inline --hot


webpack官方提供的分析工具网址

http://webpack.github.io/analyse/

命令webpack --profile --json > stats.json




  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值