如何手动搭建webpack手脚架

资料来源webpack官网 https://webpack.docschina.org/guides/asset-management/
虽然现在通常为了简便我们都会直接使用官网的脚手架，为了更熟悉我们的webpack,就尝试自己搭建了一个，操作不难。注意：请在网络良好的情况下进行操作，有时候会因为网络的问题导致下载包中有丢失的情况。
第一步 是基于node.js的基础上搭建的，所有如果你还没有下载node.js.请先去官网下载
地址：https://nodejs.org/en/
第二步 开始正式搭建啦，自定义一个文件夹，在终端中初始化项目 npm init -y

第三步 安装webpack
两个都要安装 不推荐全局安装 如果个人需要 去掉save-dev 加-g

cnpm install --save-dev webpack
cnpm install --save-dev webpack-cli

注意：也可以用npm安装 如果想用cnpm 安装命令如下

  npm install -g cnpm --registry http://registry.npm.taobao.org

显示安装webpack成功 可以使用webpack打包文件了

第四步 创建目录
1.1 在自定义文件夹下 webpack.demo添加文件
注：为了打包index.js文件，安装第三方jQuery文件 cnpm install jquery --save 也可以安装其他的依赖包

+ |- /dist
+    |-index.html
+ |- /src
+   |- index.js

1.2  
src/index.js下编写  内容根据自己需求
import $ from "jquery"
$('body').append('<div>hello webpack</div>')

1.3 
dist/index.html 下编写
<script src="main.js"></script>

1.4 调整 packpage.json里面的内容
+   "private": true,
-   "main": "index.js",

1.5
npx webpack 生成main.js文件 

1.6 配置文件 在webpack.demo中增加
+ |- webpack.config.js
以下代码直接复制进webpack.config.js中
const path = require('path');
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  }
};
创建目录完成

第五步 配置自动打包 自动刷新页面

1.安装

cnpm install --save-dev webpack-dev-server

2.修改配置文件，进入webpack.config.js

 在module.exports中 添加
 +   devServer: {
 +     contentBase: './dist'
 +   },

3.让我们添加一个 script 脚本，可以直接运行开发服务器(dev server)，进入package.json

+     "start": "webpack-dev-server --open"

4.直接运行跑项目

npm run start

补充：如果需要加载css，图片，less，sass等文件，请在moudel中安装相对应的loader
可参照开头我给的网站，管理资源中都有。