openblog

Appearance

webpack学习笔记（四） ​

图片

首先命令行进入项目根目录，下载webpack-dev-server --save

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

这个工具是用来自动刷新预览的

开始准备工作，还是新建基础操作文件，文件相对之前位置有修改

|—根目录
    |—dist
    |—src
        |—pages
            |—index.css
            |—show.js
    |—main.js
    |—index.html
    |—package-lock.json
    |—package.json
    |—webpack.config.js
|—根目录
    |—dist
    |—src
        |—pages
            |—index.css
            |—show.js
    |—main.js
    |—index.html
    |—package-lock.json
    |—package.json
    |—webpack.config.js

index.html

文件有修改

html
<!DOCTYPE html>
<html>
<head>
<meta charset=<span data-raw-text="" "="" data-textnode-index-1661906843594="20" data-index-1661906843594="353" class="character">"utf-8<span data-raw-text="" "="" data-textnode-index-1661906843594="20" data-index-1661906843594="359" class="character">">
<title>demo</title>
<!-- 导入webpack输出的css文件 -->
    <!-- 隐藏下面之前 css引用 -->
  — <!-- <link rel=<span data-raw-text="" "="" data-textnode-index-1661906843594="24" data-index-1661906843594="450" class="character">"stylesheet<span data-raw-text="" "="" data-textnode-index-1661906843594="24" data-index-1661906843594="461" class="character">" href=<span data-raw-text="" "="" data-textnode-index-1661906843594="24" data-index-1661906843594="468" class="character">"./dist/main.css<span data-raw-text="" "="" data-textnode-index-1661906843594="24" data-index-1661906843594="484" class="character">"> -->
    <!-- 增加下面css引用 -->
  + <link rel=<span data-raw-text="" "="" data-textnode-index-1661906843594="26" data-index-1661906843594="526" class="character">"stylesheet<span data-raw-text="" "="" data-textnode-index-1661906843594="26" data-index-1661906843594="537" class="character">" href=<span data-raw-text="" "="" data-textnode-index-1661906843594="26" data-index-1661906843594="544" class="character">"./main.css<span data-raw-text="" "="" data-textnode-index-1661906843594="26" data-index-1661906843594="555" class="character">">
</head>
<body>
<div id=<span data-raw-text="" "="" data-textnode-index-1661906843594="29" data-index-1661906843594="578" class="character">"app<span data-raw-text="" "="" data-textnode-index-1661906843594="29" data-index-1661906843594="582" class="character">"></div>
<!-- 导入webpack输出的javascript文件 -->
    <!-- 隐藏下面之前 js引用 -->
  — <!-- <script src=<span data-raw-text="" "="" data-textnode-index-1661906843594="32" data-index-1661906843594="668" class="character">"./dist/bundle.js<span data-raw-text="" "="" data-textnode-index-1661906843594="32" data-index-1661906843594="685" class="character">"></script> -->
    <!-- 增加下面 js引用 -->
  + <script src=<span data-raw-text="" "="" data-textnode-index-1661906843594="34" data-index-1661906843594="738" class="character">"./bundle.js<span data-raw-text="" "="" data-textnode-index-1661906843594="34" data-index-1661906843594="750" class="character">"></script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset=<span data-raw-text="" "="" data-textnode-index-1661906843594="20" data-index-1661906843594="353" class="character">"utf-8<span data-raw-text="" "="" data-textnode-index-1661906843594="20" data-index-1661906843594="359" class="character">">
<title>demo</title>
<!-- 导入webpack输出的css文件 -->
    <!-- 隐藏下面之前 css引用 -->
  — <!-- <link rel=<span data-raw-text="" "="" data-textnode-index-1661906843594="24" data-index-1661906843594="450" class="character">"stylesheet<span data-raw-text="" "="" data-textnode-index-1661906843594="24" data-index-1661906843594="461" class="character">" href=<span data-raw-text="" "="" data-textnode-index-1661906843594="24" data-index-1661906843594="468" class="character">"./dist/main.css<span data-raw-text="" "="" data-textnode-index-1661906843594="24" data-index-1661906843594="484" class="character">"> -->
    <!-- 增加下面css引用 -->
  + <link rel=<span data-raw-text="" "="" data-textnode-index-1661906843594="26" data-index-1661906843594="526" class="character">"stylesheet<span data-raw-text="" "="" data-textnode-index-1661906843594="26" data-index-1661906843594="537" class="character">" href=<span data-raw-text="" "="" data-textnode-index-1661906843594="26" data-index-1661906843594="544" class="character">"./main.css<span data-raw-text="" "="" data-textnode-index-1661906843594="26" data-index-1661906843594="555" class="character">">
</head>
<body>
<div id=<span data-raw-text="" "="" data-textnode-index-1661906843594="29" data-index-1661906843594="578" class="character">"app<span data-raw-text="" "="" data-textnode-index-1661906843594="29" data-index-1661906843594="582" class="character">"></div>
<!-- 导入webpack输出的javascript文件 -->
    <!-- 隐藏下面之前 js引用 -->
  — <!-- <script src=<span data-raw-text="" "="" data-textnode-index-1661906843594="32" data-index-1661906843594="668" class="character">"./dist/bundle.js<span data-raw-text="" "="" data-textnode-index-1661906843594="32" data-index-1661906843594="685" class="character">"></script> -->
    <!-- 增加下面 js引用 -->
  + <script src=<span data-raw-text="" "="" data-textnode-index-1661906843594="34" data-index-1661906843594="738" class="character">"./bundle.js<span data-raw-text="" "="" data-textnode-index-1661906843594="34" data-index-1661906843594="750" class="character">"></script>
</body>
</html>

index.css这个是新加的文件

css
#app{
    text-align: center;
    color: red;
    font-size: 100px;
}
#app{
    text-align: center;
    color: red;
    font-size: 100px;
}

show.js 测试方法

js
// 操作dom元素，将content显示到dom上
function show (content){
      window.document.getElementById('app').innerText = 'Hello ,' + content; 
  }
// 导出show方法
module.exports = show;
// 操作dom元素，将content显示到dom上
function show (content){
      window.document.getElementById('app').innerText = 'Hello ,' + content; 
  }
// 导出show方法
module.exports = show;

main.js 入口文件

导入新加的css文件

js
 //导入css文件
    require('./src/pages/index.css');
  // 导入show方法
    const show = require('./src/pages/show.js');
    show('世界你好');
 //导入css文件
    require('./src/pages/index.css');
  // 导入show方法
    const show = require('./src/pages/show.js');
    show('世界你好');

webpack.config.js项目执行时会自动加载根目录的webpack.config.js配置文件

修改文件

js
//导入path模块
const path = require('path');
// 导入mini-css-extract-plugin，没有下载的看之前文件下载
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
// 开发模式
    mode: 'development',
// 入口文件
    entry: './main.js',
    //出口文件
    output: {
filename: 'bundle.js',
        path: path.resolve(__dirname, './dist')
    },
    //打包预览相关配置
    devServer: {
        //静态文件访问路径配置
static: {
            //因为html文件在根目录下，所以写当前目录下
            directory: path.join(__dirname, './'),
        },
    },
    //单独导出css文件
    plugins: [new MiniCssExtractPlugin({
// 输出css文件命名
        filename: <span data-raw-text="" "="" data-textnode-index-1661906843594="84" data-index-1661906843594="1791" class="character">"mian.css<span data-raw-text="" "="" data-textnode-index-1661906843594="84" data-index-1661906843594="1800" class="character">",
    })],
    module: {
        rules: [
            {
                // 用正则表达式去匹配要用该loader转换的css文件
                test: /\.css$/,
                // 新增修改
                // use: ['style-loader','css-loader'],
                use: [MiniCssExtractPlugin.loader,'css-loader'],
            }
        ]
    }
}
//导入path模块
const path = require('path');
// 导入mini-css-extract-plugin，没有下载的看之前文件下载
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
// 开发模式
    mode: 'development',
// 入口文件
    entry: './main.js',
    //出口文件
    output: {
filename: 'bundle.js',
        path: path.resolve(__dirname, './dist')
    },
    //打包预览相关配置
    devServer: {
        //静态文件访问路径配置
static: {
            //因为html文件在根目录下，所以写当前目录下
            directory: path.join(__dirname, './'),
        },
    },
    //单独导出css文件
    plugins: [new MiniCssExtractPlugin({
// 输出css文件命名
        filename: <span data-raw-text="" "="" data-textnode-index-1661906843594="84" data-index-1661906843594="1791" class="character">"mian.css<span data-raw-text="" "="" data-textnode-index-1661906843594="84" data-index-1661906843594="1800" class="character">",
    })],
    module: {
        rules: [
            {
                // 用正则表达式去匹配要用该loader转换的css文件
                test: /\.css$/,
                // 新增修改
                // use: ['style-loader','css-loader'],
                use: [MiniCssExtractPlugin.loader,'css-loader'],
            }
        ]
    }
}

然后package.json文件添加命令行脚本

图片

--open是启动的时候默认打开浏览器

现在命令行切入到根目录，运行npm run dev

npm run dev
npm run dev

图片

浏览器会自动打开，预览输出的字符

现在修改main.js，show方法参数改成world，然后ctrl+s保存一下

图片

系统会自动监听文件修改自动编译，然后通知浏览器自动刷新，输出修改后的world

图片

到此就完成实时预览了

有些点需要讲一下，自动更新，编译的文件和之前直接执行webpack不一样，直接执行会打包到dist文件里

实时编译预览，并没有打包到dist文件里，而是保存在内存里，这样读取更方便，速度也快

正式因为这个原因，所以index.html里隐藏了之前的js和css在dist目录下的引用，路径改成了. / 当前目录的引用

图片

另外一个webpack.config.js里，关于devServer配置

图片

还有很多配置可以用，比如命令行后面跟的--open，默认打开浏览器，也可可以在里面配置好，就不用跟在命令行后面了，现在还是放在命令行脚本后面

图片

有空可以看看webpack的文档，自己配置下。

本文到此结束。

反馈信息 ​

INFO

邮箱： open_teams@163.com