webpack简单使用(三)

插件使用

将打包后的js自动引入到html文件中

  1. 安装所需要的依赖

    1
    npm install html-webpack-plugin --save-dev
  2. 在webpack.config.js中添加一行

    1
    let htmlWebpackPlugin = require('html-webpack-plugin');
  3. 在根目录中新建一个html文件,名字自取,这里叫template.html

  4. 在webpack.config.js中添加配置项

    1
    2
    3
    4
    5
    6
    plugins: [
    new HtmlWebpackPlugin({
    template:'./src/template.html',//模板
    filename:'index.html'//输出的文件名
    })
    ]

自动打包

不用每次都手动运行脚本

  1. 安装所需要的依赖

    1
    npm install webpack-dev-server --save-dev
  2. package.json中scripts配置项中新建一项

    1
    "dev":"webpack-dev-server"
  3. 运行脚本npm run dev

    默认地址是http://localhost:8080

------ 本文结束 ------

版权声明

yoGa's Blog by yoga lee is licensed under a Creative Commons BY-NC-ND 4.0 International License.
yoga lee创作并维护的yoGa's Blog采用创作共用保留署名-非商业-禁止演绎4.0国际许可证
本文首发于yoGa's Bloghttp://yoga.ibye.cn ),版权所有,若需转载请注明出处,谢谢支持。