webpack webpack.config.js配置
安装指定版本的webpack
npm install webpack@3.6 -g
安装live-server 运行项目插件 输入live-server 运行后自动打开网页
npm install -g live-server
webpack.config.js
module.exports={
//入口文件的配置项
entry:{},
//出口文件的配置项
output:{},
//模块:例如解读CSS,图片如何转换,压缩
module:{},
//插件,用于生产模版和各项功能
plugins:[],
//配置webpack开发服务功能
devServer:{}
}
- entry:配置入口文件的地址,可以是单一入口,也可以是多入口。
- output:配置出口文件的地址,在webpack2.X版本后,支持多出口配置。
- module:配置模块,主要是解析CSS和图片转换压缩等功能。
- plugins:配置插件,根据你的需要配置不同功能的插件。
- devServer:配置开发服务功能,后期我们会详细讲解。
webpack配置了 热更新 需要安装webpack-dev-server
安装 webpack-dev-server webpack是3.6版本 对应 webpack-dev-server 2.9.4版本
npm install webpack-dev-server@2.9.4 --save-dev
然后修改package.json
css打包
在./src/css/index.css 简历index.css文件
body{
background-color:#f00;
color:#fff;
}
在entry.js引入css文件
import css from './css/index.css'; document.getElementById('title').innerHTML='Hello jason';
style-loader:
它是用来处理css文件中的url()等,npm中的网址:https://www.npmjs.com/package/style-loader
用npm install 进行项目安装:
npm install style-loader --save-dev
css-loader:
它是用来将css插入到页面的style标签。npm中的网址:https://www.npmjs.com/package/css-loader
用npm install 进行项目安装:
npm n install --save-dev css-loader
两个loader都下载安装好后,我们就可以配置我们loaders了。
修改webpack.config.js中module属性中的配置代码如下:
webpack.config.js
第一种:
module:{
rules: [
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
}
]
},
第二种:
module:{
rules: [
{
test: /\.css$/,
loader: ['style-loader','css-loader'] }
]
},
第三种: 常用方式, 可以扩展
module:{
rules: [
{
test: /\.css$/,
use: [{
loader: 'style-loader'
},{
loader: 'css-loader'
}] }
]
},
JS压缩 (插件配置:配置JS压缩)
webpack.config.js 引入 uglify.js
const path = require('path');
const uglify = require('uglifyjs-webpack-plugin');
module.exports = {
entry:{
entry:'./src/entry.js',
entry2:'./src/entry2.js'
},
output:{
path: path.resolve(__dirname, 'dist'),
//filename:'bundle.js'
//[name] 自动匹配js名称
filename:'[name].js'
},
module:{
rules: [
{
test: /\.css$/,
//use: ['style-loader','css-loader']
//loader: ['style-loader','css-loader']
use: [{
loader: 'style-loader'
},{
loader: 'css-loader'
}] }
]
},
plugins:[
new uglify
],
//热更新 需要安装 webpack-dev-server2.9.4 对应 webpack3.6版本
//然后修改 package.json
/*
*"scripts": {
* "server": "webpack-dev-server"
*}
*/
devServer:{
//文件地址
contentBase: path.resolve(__dirname, 'dist'),
//IP
host: '174.16.10.160',
//文件压缩
compress: true,
//端口
port: 8008
} }
然后webpack 打包 就可以看到js文件压缩了
Html 打包
1. 先安装html 打包压缩插件
介绍网址: https://www.npmjs.com/package/extract-text-webpack-plugin
npm install --save-dev html-webpack-plugin
2. 然后配置webpack.config.js文件, 先引入 html-webpack-plugin插件
const htmlPlugin = request('html-webpack-plugin');
3. 最后插件配置代码
const path = require('path');
//引入js打包插件
const uglify = require('uglifyjs-webpack-plugin');
//引入html打包插件
const htmlPlugin = require('html-webpack-plugin'); module.exports = {
entry:{
entry:'./src/entry.js',
entry2:'./src/entry2.js'
},
output:{
path: path.resolve(__dirname, 'dist'),
//filename:'bundle.js'
//[name] 自动匹配js名称
filename:'[name].js'
},
module:{
rules: [
{
test: /\.css$/,
//use: ['style-loader','css-loader']
//loader: ['style-loader','css-loader']
use: [{
loader: 'style-loader'
},{
loader: 'css-loader'
}] }
]
},
plugins:[
//new uglify,
new htmlPlugin({
minify: {
removeAttributeQuotes: true
},
hash: true,
template: './src/index.html'
})
],
//热更新 需要安装 webpack-dev-server2.9.4 对应 webpack3.6版本
//然后修改 package.json
/*
*"scripts": {
* "server": "webpack-dev-server"
*}
*/
devServer:{
//文件地址
contentBase: path.resolve(__dirname, 'dist'),
//IP
host: '174.16.10.160',
//文件压缩
compress: true,
//端口
port: 8008
} }
- minify:是对html文件进行压缩,removeAttrubuteQuotes是却掉属性的双引号。
- hash:为了开发中js有缓存效果,所以加入hash,这样可以有效避免缓存JS。
- template:是要打包的html模版路径和文件名称。
上边的都配置完成后,我们就可以在终端中使用webpack,进行打包。你会看到index.html文件已经被打包到我们的dist目录下了,并且自动为我们引入了路口的JS文件。
总结:
html文件的打包可以有效的区分开发目录和生产目录,在webpack的配置中也要搞清楚哪些配置用于生产环境,哪些配置用于开发环境,避免两种环境的配置冲突。
webpack webpack.config.js配置的更多相关文章
- webpack.config.js配置信息的说明
module.exports = { entry: "./src/main.js", output: { filename: "build/build.js" ...
- 解决运行webpack --config webpack.dev.config.js 报错ReferenceError: _dirname is not defined
控制台报错信息如下 将webpack.dev.config.js中的_dirname 改为 __dirname 注意这里是两个下划线谢谢!感觉好坑
- vue-cli & webpack & vue.config.js
vue-cli & webpack & vue.config.js configureWebpack // vue.config.js module.exports = { confi ...
- @vue/cl构建得项目下,postcss.config.js配置,将px转化成rem
依赖包: postcss-pxtorem 配置: 在项目根目录下创建 postcss.config.js 配置如下: module.exports = () => ({ plugins: [ r ...
- vue-cli的webpack模版,相关配置文件dev-server.js与webpack.config.js配置解析
1.下载vue-cli npm install vue-cli -g vue-cli的使用与详细介绍,可以到github上获取https://github.com/vuejs/vue-cli 2.安装 ...
- webpack.config.js配置遇到Error: Cannot find module '@babel/core'&&Cannot find module '@babel/plugin-transform-react-jsx' 问题
下文是网上找到的方法,是因为版本冲突的原因,参照后安装7版本解决 cnpm install -D babel-loader@ babel-core babel-preset-env 一. 问题描述 在 ...
- webpack.config.js====配置babel
参考:https://www.jianshu.com/p/9808f550c6a91. 安装依赖babel-loader: 负责 es6 语法转化babel-preset-env: 包含 es6.7 ...
- webpack.config.js配置入口出口文件
目录结构: 新建webpack.config.js配置文件 const path = require('path') //导出 path是node内置的包 通过npm init初始化得到package ...
- webpack(4)webpack.config.js配置和package.json配置
前言 上一篇文章我们使用webpack打包成功了,但是每次都要自己手动输入打包的文件地址和打包到哪里去的地址,非常麻烦,所以这里介绍使用配置文件进行打包 webpack.config.js 首先我们创 ...
随机推荐
- 七牛云对象存储kodo使用体验
在这里,我使用了七牛云的对象存储Kodo,和阿里云的OSS,还有腾讯云的COS是同样的产品 oss相关术语 包依赖关系解决 unrecognized import path "golang. ...
- 支持向量机(一)----总述(点到平面的距离,Lagrange函数,Lagrange对偶)
概述:在对支持向量机的学习和使用过程中,遇到了许许多多的问题,通过查阅各种资料,也是逐一攻克了遇到的问题.感悟颇多,写此博文的目的是想以一个学习者的身份从一个刚接触支持向量机的角度去记录模型推到过程中 ...
- Dmango cxrf 自定义分页 缓存 session 序列化 信号量 知识点
参考https://www.cnblogs.com/wupeiqi/articles/5246483.html
- WWDC2017-whats_new_in_safari_view_controller
最后更新: 2017-08-08 官方地址: https://developer.apple.com/videos/play/wwdc2017/225/ WWDC2017中,对SafariViewCo ...
- LeetCode 47——全排列 II
1. 题目 2. 解答 在 LeetCode 46--全排列 中我们已经知道,全排列其实就是先确定某一个位置的元素,然后余下就是一个子问题.在那个问题中,数据没有重复,所以数据中的任意元素都可以放在最 ...
- springmvc 读写分离
推荐第四种:https://github.com/shawntime/shawn-rwdb 4种不方的读写分离实现方法 http://blog.csdn.net/lixiucheng005/artic ...
- Openstack_SQLAlchemy_一对多关系表的多表插入实现
目录 目录 Openstack 与 SQLAlchemy 一个多表插入的 Demo 小结 Openstack 与 SQLAlchemy SQLAlchemy 是 Python 语言下的一款开源软件,它 ...
- Delphi XE2 之 FireMonkey 入门(18) - TLang(多语言切换的实现)
一个小小的 TLang 类, 实现多语言切换, 挺好的. 它的工作思路是: 1.首先通过 AddLang('语言代码') 添加语言类别, 如: AddLang('en').AddLang('cn'). ...
- 测开之路一百:jquery引用、语法、事件
工作中一般会使用jquery代替js,jquery官网:https://jquery.com/ 引用jquery: 第一种方式:下载引用: jquery下载官网:https://jquery.com/ ...
- PHP 实现并发-进程控制 PCNTL
参考 基于PCNTL的PHP并发编程 PCNTL 是 PHP 中的一组进程控制函数,可以用来 fork(创建)进程,传输控制信号等. 在PHP中,进程控制支持默认关闭.编译时通过 --enable-p ...