webpack基础配置

（1）安装webpack

    首先建立一个目录，好比demo，而后使用npm初始化配置

npm init

   接下来填好选项后，完成后会在demo目录下生成一个package.json的文件。输入这个命令后，终端会问你一系列诸如项目名称，项目描述，做者等信息，不过不用担忧，若是你不许备在npm中发布你的模块，这些问题的答案都不重要，回车默认便可。

  

（2）接下来在本地局部安装webpack。package.json文件已经就绪，接下来在本项目中安装Webpack做为依赖包

npm install webpack --save-dev

  --save-dev会做为开发依赖来安装webpack。安装成功后，在package.json中会多出一项配置：

"devDependencies":{
    "webpack":"^2.3.2"
}

接着须要安装webpack-dev-server，能够在开发环境提供不少服务。好比启动服务器、热更新、接口代理等，配置起来也很简单。一样，在本地局部安装：

npm install webpack-dev-server --save-dev

    ②除了上述方法外，还能够如今 npm 配置文件 package.json 文件的script中添加一个快速启动 webpack-dev-server服务的脚本，

    

    执行时运行 npm run dev 命令，就会执行脚本中dev字段的命令，其中，--open指的是运行命令后，自动打开浏览器，--config指读取配置文件的路径。webpack的项目中，webpack配置一般都命名为webpack.config.js, 并存放在build文件夹下。

  固然若是区分开发版本和正式版本，常区分命名webpack.dev.conf.js 和 webpack.prod.conf.js, 一般还会有一个webpack.base.conf.js用来配置两个版本相同配置，而后经过import和merge形式添加到各自版本中

  对于脚本中的配置，除了 --open 不少 --config以外，还有几个经常使用的一块儿在这里总结。

• --open: 在执行命令是自动在浏览器打开页面
• --config: 指明读取的配置文件的路径
• --progress: 在控制台打印编译过程信息
• --host: 指明执行的IP地址，默认是 127.0.0.1，也就是 localhost
• --port: 指明执行时启用的端口号
• --watch: 根据构建是获得的依赖关系，对项目所依赖的全部文件进行监听，发生改变即从新构建（该功能如今通常使用webpack-dev-server自动刷新机制和热替换HMR机制替代）
• --hide-modules: 执行编译时不将webpack模块内容添加到编译输出文件中

     安装完成后，最终的文件内容。

      

（3）本质js文件
    webpack就是一个.js配置文件，你的架构好或者差都体如今这个配置里，随着需求的不断出现，工程配置也是逐渐完善的。由浅入深，一步步来支持更多的功能。

    首先在demo目录下建立一个js文件：webpack.config.js，并初始化它的内容。

var config={

};
module.exports = config;

  这里的module.exports = config；至关于export default config；因为目前尚未安装支持ES6编译插件，因此不能直接使用ES6的语法，不然会报错。

（4）添加启动脚本，安装webpack-dev-server服务

    在 npm 配置文件 package.json 文件的script中添加一个快速启动 webpack-dev-server服务的脚本

{
  "scripts": {
    "test": "echo \"Error: on test specified\" && exit 1 ",
    "dev": "webpack-dev-server --open --config build/webpack.config.js" 
  }
}

  当运行npm run dev时，就会执行webpack-dev-server --open --config build/webpack.config.js命令，其中--config是指向webpack-dev-server读取的配置文件路径，这里读取咱们在上一步建立的webpack.config.js文件。--open会在执行命令时自动在浏览器打开页面，默认地址是127.0.0.1:8000，不过ip和端口都是能够配置的。

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server  --host 172.172.172.1 --prop 8888 --open --config build/webpack.config.js"
  },

    这样访问地址就改成了172.172.172.1:8888,。通常在局域网下，须要让其余同事访问时能够这样配置，不然用默认的127.0.0.1（localhost）便可。

（5）入口和出口

    webpack配置中最重要的也是必选的两项是入口（Entry）和出口（Output）。入口的做用是告诉webpack从哪里开始寻找依赖，而且编译。出口则是用来配置编译后的文件存储位置和文件名。

    在demo下新建一个空的main.js做为入口的文件，而后在webpack.config.js中进行入口和输出的配置。

 

 

 

 

 

 

 

 

 

 

.