webpack入门到实战（一）------安装及使用Webpack的配置文件

概念：webpack 是一个现代 JavaScript 应用程序的*静态模块打包器(module bundler)

在项目创建好安装webpack的几个步骤

1.首先npm init生成package.json

2.npm install webpack webpack-cli -D（项目局部安装）

3.卸载全局webpack:npm unistall webpack webpack-cli -g（如果不小心在全局装了webpack的话，为什么不建议在全局装是因为如果遇到两个项目使用的webpack版本不一致的话会有影响）

4.在目录创建webpack.config.js
文件内容

//引入是为了path那里不需要写绝对路径
const path = require('path')
module.exports = {
   //入口
   entry:'./index.js'
   //输出
   output: {
   		filename: 'bundle.js',
   		//__dirname指的是webpack.config.js所在文件夹位置
   		path: patn.resolve(__dirname,' '); 
   }
}

如果对path.resolve有不理解的可以参考这个文章
ps:path.resolve([…path])https://www.jianshu.com/p/3a713442b70b

5.webpack的默认配置文件名称为webpack.config.js 如果需要重新配置webpack --config xx.js

6.在package.json配置script 简化命令

scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
//打包时候就可以用npm run build去打包

下一节我会介绍webpack里的loader是什么,以及file-loader,url-loader,css-loader等loader的用法详解。

参考链接 path.resolve()