webpack创建页面的过程

1、项目文件夹中创建各类型文件放置的文件夹，如：iTestingWeb文件夹下创建src dist文件夹，用途：src为源码 dist为生成后的文件放置位置，然后在源码文件夹中进一步按文件类型增加文件夹:css、js、images等文件夹

2、在src文件夹中创建一个入口index.html文件，vscode编译器使用快捷键：!+Tab方式快速创建html页面,并快捷创建一个测试代码：

ul>li*10{这是第$个li}，实现10行测试数据快速生成

3、继续在src中创建js的入口文件：main.js

4、由于会用到js文件，因此我们导入jquery：在终端中（项目文件夹）里首先运行：npm init 来初始化生成一个package.json，该文件有以下几个作用：

　　a、作为一个描述文件，来描述你的项目依赖了哪些包

　　b、允许使用“语义化”来指定项目依赖包的版本

　　c、更好的与其他开发者分享，便于重复使用

5、初始化npm后，开始安装依赖包：jquery：npm i jquery,安装成功后，项目文件会增加一个文件夹：node_modules来存放下来好的依赖包

6、不倡导直接在html中增加jquery的引入，因为会多一次请求，因此我们直接把jquery的引入封装到main.js入口js文件中：import $ form 'jquery' ，逻辑为：从node_modules里到处jquery.js并赋值给前端用$来接收，以后的$就代表jquery。另：import 引入模式为es6的模块引入方式。

7、因为通过import方式所以传统的解析是不支持的，因此开始引入webpack，首先要安装webpack：

运行`npm i webpack -g`全局安装webpack，这样就能在全局使用webpack的命令

8、安装完后执行命令来实现webpack的打包：

webpack src/js/main.js dist/bundle.js. 该语句的意图是：把源码的main.js文件打包成支持所有兼容的bundle.js文件来供前端访问.

9、基本的发布已经搞定，现在要简化一下，不要每次输入 src/js/main.js dist/bundle.js. 这样的入口和出口地址部分，想直接输入webpack就可以直接打包：项目根目录中增加“webpack.config.js”配置文件,然后就可以执行简易的打包命令：webpcak即可

//这个配置文件，其实就是一个js文件，通过Node中的模块操作向外暴露一个配置对象，然后命令行通过webpack命令直接被执行
module.exports = {
    //配置文件中，需要手动指定入口和出口
    //入口
    entry: {
        //表示要使用的webpack打包哪个文件
        path: path.join(__dirname, './src/main.js'),
    },
    //出口
    output: {
        //指定打包好的文件输出到哪个目录里
        path: path.join(__dirname, './dist'),

        //指定输出文件的名称
        filename: 'bundle.js'
    }
}

10、接下来继续延伸：如果每次修改每次都在命令行中输入webpack也是烦躁的，我们可以通过另一个工具来简化：webpack-dev-server；注意：该工具安装必须依赖本地项目要存在webpack，就是说即使已经安全的全局的webpack，也需要在项目本地再安装一遍：npm i webpack -D ；安装webpack-dev-server命令为：npm i webpack-dev-server -D，安装完毕后，当直接在命令行执行webpack-dev-server命令的时候会出现错误，原因是因为webpack-dev-server不会全局，也不应该是全局，因此如果想支持这个工具，就需要在package.json配置文件中增加脚本快捷：scripts下增加：

{
  "name": "itestingweb",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack --mode development",
    "build": "webpack --mode production",
    "start2": "webpack-dev-server --open --port 3000  --contentBase src --hot",
    "start": "webpack-dev-server --open"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "jquery": "^3.3.1"
  },
  "devDependencies": {
    "clean-webpack-plugin": "^0.1.19",
    "css-loader": "^1.0.0",
    "html-webpack-plugin": "^3.2.0",
    "style-loader": "^0.21.0",
    "webpack": "^4.16.4",
    "webpack-cli": "^3.1.0",
    "webpack-command": "^0.4.1",
    "webpack-dev-server": "^3.1.5"
  }
}

这样只要执行：npm run start就可以运行工具。后面的“--open”表示的是执行命令后直接打开浏览器，安装完开发者环境后，如何才能实现修改后页面自动更新？这就需要一个热更新插件：

HotModuleReplacementPlugin

该对象的使用步骤为：1、webpack.config.js增加开发者服务配置（devServer）：

devServer: {
        //contentBase: './dist',
        // 设置服务器访问的基本目录
        contentBase: path.resolve(__dirname, 'dist'), //最好设置成绝对路径
        // 设置服务器的ip地址,可以是localhost
        host: 'localhost',
        // 设置端口
        port: 8090,
        // 设置自动拉起浏览器
        open: true,
        // 设置热更新
        hot: true
    }

2、webpack.config.js引入webpack对象（因为热更方法在对象中）

const webpack = require('webpack');

3、插件配置中new一个热更新对象

new webpack.HotModuleReplacementPlugin(),

这样重新npm run start 就可以实现热更新了，只要服务开着就不需要每次再做其他动作了。只管调整项目代码就好

11、目前我们可以知道bundle.js是根据webpack-dev-server这个工具将其放在了缓存中，那么是否可以将html页面也放进去？答案是肯定的，这就需要借助一个插件来实现：html-webpack-plugin ，安装命令：npm i html-webpack-plugin -D,安装好后，需要在webpack.config.js里增加配置,先导入插件

const htmlWebpackplugin = require('html-webpack-plugin');

，再在plugins里new出对象：

const path = require('path')
const htmlWebpackplugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const webpack = require('webpack');

//这个配置文件，其实就是一个js文件，通过Node中的模块操作向外暴露一个配置对象，然后命令行通过webpack命令直接被执行
module.exports = {
    //配置文件中，需要手动指定入口和出口
    //入口
    entry: {
        //表示要使用的webpack打包哪个文件
        path: path.join(__dirname, './src/main.js'),
    },
    //出口
    output: {
        //指定打包好的文件输出到哪个目录里
        path: path.join(__dirname, './dist'),

        //指定输出文件的名称
        filename: 'bundle.js'
    },
    plugins: [
        new webpack.NamedModulesPlugin(),
        //new一个热更新的模块对象（步骤：1、devServer增加配置 2、引用webpack对象（const webpack = require('webpack') 3、插件数组中 new一个热启动对象 ））
        new webpack.HotModuleReplacementPlugin(),
        new htmlWebpackplugin({
            title: 'Output Management',
            template: path.join(__dirname,'./src/index.html'),
            filename:'index.html'
        })
    ],
    devServer: {
        //contentBase: './dist',
        // 设置服务器访问的基本目录
        contentBase: path.resolve(__dirname, 'dist'), //最好设置成绝对路径
        // 设置服务器的ip地址,可以是localhost
        host: 'localhost',
        // 设置端口
        port: 8090,
        // 设置自动拉起浏览器
        open: true,
        // 设置热更新
        hot: true
    },
    devtool: 'inline-source-map',

    //用于配置所有的第三方模块加载器
    module:{
        rules:[
            //配置处理.css文件的第三方loader规则
            {test:/\.css$/,use:['style-loader','css-loader']},
        ]
    }
}

然后执行 npm run start就会自动将页面放在缓存里了，当使用了html-webpack-plugin这个插件后，就不再需要我们再手动处理js的引用了，因为这个插件已经帮我们创建了一个合适的script，并且引用了正确的访问路径，此时在html页面我们会看到：

<script type="text/javascript" src="bundle.js"></script>

这行代码。

12、此时基本的页面已经出来了，那么我们如何增加样式资源呢？

　　这就需要增加样式文件及其引用来处理：在css文件夹里增加一个index.css文件，比如要删除每行记录前面的点：

li{
    list-style: none;
}

然后在入口js里增加css的资源引用：import './css/index.css'，此时我们支持npm run start会出现错误，那是因为我们缺少两个工具：'style-loader','css-loader'，如何增加：

1、先npm i style-loader -D; npm i css-loader -D

2、再在webpack.config.js里增加配置：

//用于配置所有的第三方模块加载器
    module:{
        rules:[
            //配置处理.css文件的第三方loader规则
            {test:/\.css$/,use:['style-loader','css-loader']},
        ]
    }
}

注意：此配置中test后面的处理是依据正则表达式来进行.css文件识别的，并且：在工具加载的时候步骤是先css-loader再style-loader的从右向左的顺序执行工具加载。当加载完style-loader后，再将加载后的工具加载到webpack中用来打到调用。

13、

//在项目下，运行下列命令行
npm install --save-dev sass-loader
//因为sass-loader依赖于node-sass，所以还要安装node-sass
npm install --save-dev node-sass

webpack创建页面的过程

猜你喜欢