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 对象中可以进行一些配置入下截图:

  • 相关阅读:
    使用grep搜索多个字符串
    Linux中如何启用root用户
    Docker Image 的发布和 Container 端口映射
    IIS负载均衡
    IIS负载均衡ARR前端请求到本地服务器和后端处理服务器
    IIS http重定向https,强制用户使用https访问的配置方法-iis设置
    IIS中应用Application Request Route 配置负载均衡
    IIS配置HTTPSIIS配置HTTPS
    asp.net用户登入验证
    高频交易建模
  • 原文地址:https://www.cnblogs.com/zhx119/p/10608868.html
Copyright © 2011-2022 走看看