前提

webpack是一个基于node的项目，所以首先需要确保你的电脑里面已经安装了node.js，以及npm。

踩坑一：

要想在命令行使用webpack，首先要进行全局安装，否则会报“webpack不是内部命令”，命令行中输入如下命令：

npm install webpack -g

踩坑二：

可以在js文件中引入css文件，但是要用webpack命令安装两个loader。

npm install css-loader style-loader --save-dev

然后在js文件中引入，css-loader使得webpack能够处理.css文件，而style-loader则用来处理webpack处理过后的文件，并在执行代码时，将css代码以<style></style>的形式插入到html中，这个我们可以在浏览器中打开开发者工具查看。

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

注意，每次修改文件，都应该用下面命令重新打包一次，即编译一次

webpack hello.js hello.bundle.js //hello.js是原文件，hello.bundle.js是打包后的文件，hello名称可以随意取

除了可以在reqiure方法中加loader，还可以在命令行加，将require方法修改如下

require('./style.css')

命令行中以下面方式编译，这样也可以实现一样的效果。

webpack hello.js hello.bundle.js --module-bind "css=style-loader!css-loader"

踩坑三

常用命令：

--module-bind  绑定模块（loader模块style-loader css-loader）
--watch 代码改变时自动重新打包
--display-modules 显示打包的模块
--display-reasons 显示打包该模块的原因
--progress 显示打包过程

踩坑四

新建目录并完成初始化命令

>e:
>mkdir imooc//创建imooc文件夹
>cd imooc//进入imooc文件夹
>mkdir webpack-demo//在imooc下创建webpack-demo文件夹
>cd webpack-demo//进入webpack-demo文件夹
>npm init//初始化
>npm install webpack --save-dev//本地安装webpack

踩坑五

webpack在执行的时候，默认情况下，会搜索当前目录的webpack.config.js文件，如果你把这个文件的名字给改了，那运行webpack就无法找到该文件了，这时可以通过 –config 选项来指定配置文件，即

webpack --config 修改后的文件名

踩坑六

webpack的三种用法
1.直接命令行使用。
2.node.js API的使用方式。
3.webpack —config webpack.config.js

webpack配置里的entry属性值可以为有三种形式。
1、字符串。只有一个入口的话，可以直接使用双引号，并且output中的filename可以写死，如写为bundle.js。如

entry:"./entry.js"

2、数组。当webpack允许多个入口点，也可以是一个数组，这样子，两个文件就打包时会变成了一个文件。如

entry: ['./src/script/main.js','./src/script/a.js']

3、对象。给entry传入一个对象，对象内容分key和value，此时filename就不能写死为一个文件，否则会报错“Conflict: Multiple assets emit to the same filename bundle.js”，而应该写成’[name].js’。如：

entry: {
        main:'./src/script/main.js',
        a:'./src/script/a.js'
    },

    output: {
        path: path.resolve(__dirname, './dist/js'),
        filename:  '[name].js'//注意此处要这样写，不然会报错
    }

踩坑七

1、为了在打包时区分不同的文件，output提供了三种占位符：
：[name]、[hash]、[chunkhash]
2、output的filename
（1）hash: 这次打包的hash
每次终端运行webpack命令，都会生成一段信息，这段信息的第一行就有一个hash
（2）chunkhash:每一个chunk自己的hash
3、output的path，//这里配置的是输出的文件地址

踩坑八：htmll-webpack-plugin插件的使用

html中引入script，如果是hash或者chunkhash生成的js，则src每次都要修改，避免修改的方法就是用webpack的插件：

1、安装webpack插件：

终端项目目录输入：npm install html-webpack-plugin –save-dev

2、配置文件中建立对插件的引用

webpack.config.js中
（1）引用插件
var htmlWebpackPlugin=require(‘htmll-webpack-plugin’);
（2）以index.html为模板
设置plugins:[
new htmlWebpackPlugin()// 初始化插件
]
这里的代码只会让webpack自动生成一个index.html，里面自动把js代码插入到index.html当中。//注意，这里说的是webpack生成的index.html，不是你自定义的index.html。
要想让生成的index.html是自定义的，那么就要设置
plugins:[
new htmlWebpackPlugin({
template: ‘index.html’,//这里的index.html就是根目录下的index.html文件，是你自己写的文件。
filename: ‘index-[hash].html’,//这里指定的是生成的文件的名字
inject: ‘body’,// 这里可以指定js文件是放在head还是body标签里面具体还可以放哪，请看文档说明。https://github.com/jantimon/html-webpack-plugin#configuration
})// 初始化插件
]
（4）webpack使用插件的地址是根据配置里的context，上下文来决定的。
（5）html文件生成在dist下，而不是一直在js下
output:{
path:path.resolve(__dirname,’./dist’),
filename:’js/[name]-[chunkhash].js’//js文件生成到js文件夹中
}

3、html中引用webpack.config.js中的参数

plugins:[
        new htmlWebpackPlugin({
            ...
            title:"webpack is good"
            ...
        })


    ]

<title><%= htmlWebpackPlugin.options.title %></title>

在执行一次下面命令，我们发现title被更新了

npm run webpack

webpack入门笔记（一）——漫漫踩坑路

前提