zoukankan      html  css  js  c++  java
  • webpack 4.0配置

    webpack一般是本地安装,一般安装webpack webpack-cli,一般是开发依赖上线的时候不需要打包通常npm install webpack webpack-cli  -D安装

    安装的时候先初始化 npm init -y,然后安装npm install webpack webpack-cli  -D -D的意思当前的开发依赖上线的时候不需要,webpack可以进行零配置,但是这样很弱,webpack是打包工具

    输出后的结果就是js模块化

    打包一般有打包的目录,我们建立src目录建立index.js,里面有代码输入让其打包使用命令npx webpack,就将我们刚才的js文件进行打包好,这种形式是零配置

    手动配置webpack

    默认配置文件的名字是webpack.config.js,webpack 是node的写出来的,因此要用node的写法如下就是webpack.config.js的文件配置:

    运行webpack打包,使用命令npx webpack,也可以在package.json中script脚本设置截图如下:这样运行命令npm run build就可以打包了

     

    如果想打开页面通过locallhost形式打开,webpack 内置了一个express服务器通过npm install webpack-dev-server -D来安装  

    启动服务器可以使用 npx webpack-dev-server 这样的好处不是真实的打包文件,只是生成了一个内存中的打包,把打包文件生成到内存中这样访问生成的地址就能访问生成的静态目录

    我们可以在webpack.config.js中进行配置,在package.json中配置如下:

    webpack-dev-server配置如下:

     要想在生成html需要插件 html-webpack-plugin npm install  html-webpack-plugin -D设置插件的webpack-config.js文件如下:

    npm run dev 会生成index.html,和bundle.js但是我们看不到,在new HtmlWebpackPlugin 对象中可以进行一些配置入下截图:

  • 相关阅读:
    性能测试_LR11_数据向导
    python django部署linux服务器
    pip升级问题
    解决win10命令提示行下cnpm无反应
    adb常用命令连接设备/查看包名/查看activity
    android虚拟机sdcard操作出现mkdir failed for , Read-only file system的解决办法
    Django项目和应用创建
    mac下配置python虚拟环境
    这个是我的标题_2020_01_01_18_49_21
    这个是我的标题_2020_01_01_18_47_58
  • 原文地址:https://www.cnblogs.com/zhx119/p/10608868.html
Copyright © 2011-2022 走看看