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