webpack安装入门（1）

webpack英文网站https://webpack.github.io/

中文网站 https://www.webpackjs.com/concepts/entry-points/

webpack有什么用：

• es6的语法转化为es5浏览器可读的–（需要借助babel）

• vue、react等可以直接编译

• css可以用less、sass等语法并自动补全浏览器的兼容问题。

• 压缩文件和图片。（压缩图片效果不好）

1，安装node和npm

在node官网下载node应用，官网地址为：http://nodejs.cn/。node和npm会一起被安装。安装成功后在终端运行node -v测试是否安装成功。

2，安装webpack

新建一个新的文件夹，创建package.json文件，文件内容：{}，就可以。

npm install --save webpack 

–save表示安装的包名要写入package.json的dependencies节点下。如果–save-dev会写入devDependencies节点下

webpack4以后需要同时安装webpack-cli

npm install --save-dev webpack-cli

文件目录如下

 webpack-demo
  |- package.json
+ |- build
			webpack.config.js
  |- /dist
  |- index.html
  |- /src
    |- index.js

3，创建webpack.config.js配置文件

在这个test项目和package平行的文件下，新建build文件夹，并在其内新建webpack.config.js。内如如下：

const path = require('path');
module.exports = {
    mode:'none',
    entry:'./src/index.js',
    output:{
        path: path.resolve(__dirname,"./dist"),
        filename: 'bundle.js',
    }
}

webpack.config里导出一个对象。entry为要打包的入口文件。

output为打包后导出的地址以及名字，path为地址，filename为文件名。

4，新建index.js

index.js里的内如如下

document.write("hell word")

5，开始打包

由于webpack是本地安装，所以不能直接使用全局命令webpack，需要进入到node的./bin里执行。

./node_modules/.bin/webpack  --config ./build/webpack.config.js

这里边–config表示可以传递任何名称的配置文件，如果webpack.config.js和node_modules同级别可以不指定文件名，（webpack默认会自动执行webpack.config.js文件）直接访问如下所示

./node_modules/.bin/webpack 

打包后会在dist目录下生成bundle.js。查看内容可以看到index.js里的内容。

6，另外一种运行打包书写方式

在package.json里添加scripts属性，start对应的值，会当做脚本进行运行，这里wepack不用写相对路径，

"scripts": {
    "start": "webpack --config ./build/webpack.config.js",
    
  }

{
  "main": "index.js",
  "scripts": {
    "start": "webpack --config ./build/webpack.config.js",
    
  },
  "dependencies": {
    "webpack": "^4.43.0"
  },
  "devDependencies": {
    "webpack-cli": "^3.3.11"
  }
}

可能遇到的问题和报错问题：

---

1，

没找到文件，检查index.js的目录是否正确。