前提

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