webpack新手简单入门1

安装
先安装nodejs，具体方法就不在此叙述了，请百度。
新建立一个项目文件夹，在命令行进入此文件夹使用如下命令。
npm init // 此命令为建立package.json文件。
npm install webpack –save-dev // 此方法为局部安装.
ps:本人在这一步遇到如下的问题。
1. 在创建package文件后，使用第二步命令的时候报错。
2. 在安装好webpack后，使用webpack命令，提示命令无效。
解决办法：
1：不要npm init创建package文件，直接去github上将webpack的package文件复制过来，然后输入npm install 安装。
https://github.com/webpack/webpack
2：针对命令无效的情况，网上给出的建议是配置环境变量，然而本人太笨，不会弄，用了个蠢方法。先npm instal webpack -g全局安装，然后再进行局部安装。

正常步骤安装
npm init
npm install webpack --save-dev

遇到问题的安装方式
先全局安装
npm install webpack -g

然后进入项目文件件
npm install // 请保证项目文件夹有从github上面拉过来的package.json文件

安装成功之后如下图

使用
在项目文件夹建立一个hello.js

function hello(){
console.log("hello world!")
}
hello()

然后在命令行输入

webpack hello.js bundle.js

下图表示打包成功

打包成功后，将会在你的项目文件夹生成一个名为bundle.js的文件。
在创建一个index.html的文件,将这个bundle.js文件引用进去。打开这个index文件，在控制台会打印出hello world。
webpack.config配置文件
上面的使用方式是对webpack使用方法的初步了解，在面对真正的项目时，我们需要使用webpack.config文件来满足我们各种各样的要求。
新建一个webpack.config.js文件

  module.exports = {
   entry: './路径' // 这里是放我们需要打包的js文件的路径。
   output：{
   path：'./路径' // 这里放的是我们打包之后生成的文件的路径，
   filename: 'name'  // 这里是打包之后生成的文件名称
    }

}

对package。json文件进行基本配置之后，在命令行输入

webpack 回车就可以了

当我们需要打包数个js文件的时候，我们可以对entry和output的值进行改变。entry的值接受数组
和对象。例如：

数组值
entry: ['./a.js','./b.js']
对象值
entry：{
a: './a.js',
b： './b.js'
}
output: {
path: '出口路径'，
// entry的值为对象时，filename需要配置，请选择三个中的一个
filename： '[name].js'
}
filename：'[name]-[hash].js'
filename:'[name]-[chunkhash].js'

//entry 和 output更多的配置请阅读webpack官方文档。