带你从0到1了解webpack(二)

上一节都简单的搞了一下webpack,让你知道这个玩意到底干啥的
但是在正式的开发中,一般都会有更复杂的配置,比如指定打包的输入路径和输出路径

webpack 4.x的版本中

默认打包的入口是在src下的`index.js`文件
默认的打包的出口是在dist下的`main.js`文件

打开项目,在webpack.config.js中,配置下面的代码

const path = require('path')
module.exports = {
	entry: path.join(__dirname, './src/index.js'), // 打包入口文件的路径
    output: {
        path: path.join(__dirname, './dist'), // 输出文件的存放路径
        filename: 'text.js' // 输出文件的名称
    }
}

ok,再npm run dev一下
在这里插入图片描述
dist目录下生成了一个叫做text.js的文件,这个文件和在output下配置的文件名一致
重新在src下引入这个新生成的text.js,运行一下代码,表格隔行变色依然生效

二,如何配置自动打包

实际开发项目中,不可能每次修改文件,保存以后都去运行一遍npm run dev这样子肯定会被当场砍死,所以,自动打包就成了必须

  1. 运行npm install webpack-dev-server -D命令,安装支持项目自动打包的工具
  2. 修改package.json的script命令
"script": {
	"dev" : "webpack-dev-server" // 把之前dev下的webpack换成webpack-dev-server
}
  1. 修改index.html引入js的路径,换成绝对路径/text.js
  2. 重新运行指令npm run dev
  3. 点击localhost:8080链接进入页面

在这里插入图片描述
OJBK,尝试在js页面改动一些东西,保存,就能实时刷新了

这个地方打包以后,有2个点要注意
  1. webpack-dev-server会启动一个实时打包的http服务器
  2. webpack-dev-server打包生成的输出文件,默认放到了根目录中,而且是虚拟的,看不见的,所以在目录文件找不到打包好的文件

三,生成预览页面

在上面,我们npm run dev 以后,发现点击进入localhost:8080并不是自己写的这个页面,需要点击相对的文件,才能进入到我想要的页面,现在我想只要运行命令,打开文件就可以直接到我写的那个页面去

配置一下html-webpack-plugin就可以了,将src的index.js复制到根路径

  1. 运行 npm install html-webpack-plugin -D指令
  2. 修改webpack.config.js的配置信息
const HtmlWebpackPlugin = require('html-webpack-plugin')
const htmlPlugin = new HtmlWebpackPlugin({
	template : '/src/index.html', // 指定要用到的模板文件
	filename: 'index.html' // 指定生成的文件的名称,该文件存在于内存中,在目录不显示
})
  1. 修改webpack.config.js向外暴露的配置对象,新增如下配置节点
module.exports = {
	plugins: [ htmlplugin ] // plugins数组是wbpack打包期间会用到的一些插件
}

运行,生效,OJBK

展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客
应支付0元
点击重新获取
扫码支付

支付成功即可阅读