首页 > Web开发 > 详细

Webpack初步使用

时间:2019-06-17 22:52:28      阅读:144      评论:0      收藏:0      [点我收藏+]
前端使用vue时使用webpack打包工具:注意使用webpack打包工具时,不建议在html文件中引入任何其他文件
1.新建文件夹,在文件夹下创建目录
|--dist
|--src
    |--css
    |--js
    |--img
    |--index.html
    |--main.js    //这个是所有的Js文件的入口
|--webpack.config.js    //这个是配置文件    

//以上文件创建完成之后
在webpack.config.js配置信息:
const path = require(‘path‘)
module.exports = {
    entry: path.join(__dirname,‘./src/main.js‘),//入口,这里表示webpack要打包哪个文件
    output:{
        path:path.join(__dirname,‘./dist‘),//出口,表示webpack打包完后将文件输出到哪个目录
        filename:‘bundle.js‘//这是指定输出的文件的名称
    }
}

//若需要用到jquery,则在main.js文件中使用import方式导入
在main.js中配置
*import $ from ‘jquery‘
完成之后需要在npm中下载此依赖,下载方式:npm i jquery -s 
下载完成之后,项目中会多出node_modules目录

//接着需要安装webpack打包工具,4.0以上版本还需要安装webpack-cli工具
*安装方式:cnpm i webpack -D  以及  cnpm i webpack-cli -D (虽然全局已经安装过webpack,但是在项目中还是需要安装此工具)
此时项目中会多出:package.json文件

//以上方式若我们有修改文件,我们每次更新都需要重新打包,所以为了减少不必要的打包操作,则引入自动打包工具webpack-dev-server
*安装方式:cnpm i webpack-dev-server -D
安装完成之后需要配置一些信息使其可以自动打包编译
在package.json文件中配置:--open:项目启动后自动打开浏览器   --port 3000:设置项目端口  --contentBase src:项目在浏览器中默认打开的文件文字  --hot:热更新
{
  "scripts": {
    "dev": "webpack-dev-server --open --port 3000 --contentBase src --hot"
  }
}
配置完后则可以通过命令:npm run dev 启动项目

//接着我们还可以把html文件放入内存中,首先需要安装html-webpack-plugin工具
*安装方式:cnpm i html-webpack-plugin -D
安装完成之后需要在webpack.config.js中导入此工具
const htmlWebpackPlugin = require(‘html-webpack-plugin‘)
然后再配置其相关信息
//配置
module.exports = {
    plugins:[//配置插件的节点
        new htmlWebpackPlugin({    //创建一个在内存中生成html页面的插件
            template:path.join(__dirname,‘./src/index.html‘),//指定模板页面,将来会将此路径的页面在内存中去生成
            filename:‘index.html‘//指定生成页面的名称
        })
    ]
}

//样式文件的引入,由于webpack默认只能打包处理Js类型的文件,无法处理其他非Js类型的文件,所以需要我们手动的去设置匹配规则
*安装第三方加载器:cnpm i style-loader css-loader -D
安装完成之后在main.js中用import方式引入css文件
import ‘./css/index.css‘
然后在webpack.config.js配置文件中进行配置:
//配置
module.exports = {    
    module:{//所有第三方模块加载器
        rules:[//所有第三方模块的匹配规则,test表示正则的test()方法
            {test:/\.css$/,use:[‘style-loader‘,‘css-loader‘]}//css文件的第三方loader规则
        ]
    }
}

 

Webpack初步使用

原文:https://www.cnblogs.com/joelan0927/p/11042437.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!