webpack基础学习教程1

安装命令

安装在项目中

npm install web pack --save-dev

1.默认配置文件名称webpack.config.js，使用其他配置文件 webpack —-config otherconfigname.js

其他命令行：

--progress 显示打包进度

--display-modules 显示打包的模块

--colors 彩色显示

--display-reasons 显示打包原因

2.配置文件开始 module.exports = {}

3.入口文件配置属性entry，出口文件配置属性output

例如：

1）.单个入口文件，单个出口文件配置

module.exports = {

    //单个入口文件，单个出口文件

    entry:'./src/main.js',

    output:{

        path:'./dist/js',

        filename:'main.bundle.js'

    }

}

2）.多个入口文件，多个出口文件

module.exports = {

    //多个入口文件，多个出口文件

    entry:{

        main:'./src/main.js',

        a:'./src/a.js'

    },

    output:{

        path:'./dist/js',

        filename:'[name]-[hash]-[chunkhash].js'

    }

}

备注：多个出口文件需要使用占位符

[name] 文件名称

[hash] 文件每次打包的哈希值，每次打包都会不一样

[chunkhash] 每次打包文件的哈希值，每个文件都会不同，只有文件被修改打包之后才会改变，文件没有修改打包后与上一次打包生成的哈希值相同

4.css文件打包需要loader

css 文件打包需要用到两个loader：css-loader，style-loader

css-loader css文件打包必不可少，没有它文件打包报错

style-loader 打包完成之后加载css文件到html页面

安装方法：npm install css-loader style-loader --save-dev

具体使用方法见下篇文章