webpack创建html项目,从零开始其于webpack搭建bootstrap 4项目
环境与目录与初始化
首先确认安装node环境,不多说,运行node -v我的是v10.15.3。
其次在要创建项目的目录运行:
mkdir bs4
cd bs4
新建了bs4目录并进入此目录后,初始化项目
npm init -y
项目使用Git管理,安装好Git后运行:
git init
在项目根目录创建.gitignore文件并输入如下内容:
.DS_Store
node_modules
/dist
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
安装 webpack
新版webpack需要安装webpack-cli:
npm install webpack webpack-cli --save-dev
在项目根目录新建webpack.config.js来配置webpack。其内容初始如下:
const path = require('path');
const webpack = require('webpack');
module.exports = {
entry: {
index:"./src/index.js"
},
output: {
path: path.resolve(__dirname,"dist"),
filename: "[name].js",
publicPath: ""
},
module: {
rules: []
},
devServer: {
contentBase: path.resolve(__dirname,'dist'),
host:"localhost",
port:8080,
open: true
},
plugins: []
};
新建src目录,用于存放开发源文件。
安装 webpack-dev-server
webpack-dev-server用于搭建一个服务器。
npm install webpack-dev-server --save-dev
修改根目录下package.json文件scripts字段,添加入下内容:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --mode development",
"build": "webpack --mode production"
},
安装 html-webpack-plugin
html-webpack-plugin用于简单创建 HTML 文件,用于服务器访问。
npm install html-webpack-plugin --save-dev
安装成功后,在webpack.config.js配置文件头部引入此插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
并在webpack.config.js配置文件plugins内实例化HtmlWebpackPlugin:
new HtmlWebpackPlugin({
chunks:['index','common','vendor'],
filename:"index.html",
template:"./public/index.html",
hash:true
})
项目根目录新建public目录,并添加一个index.html作用入口的模板文件。
安装 clean-webpack-plugin
clean-webpack-plugin用于每次打包前清楚以前打包生成的文件。
npm install clean-webpack-plugin --save-dev
安装成功后,在webpack.config.js配置文件头部引入此插件
const CleanWebpackPlugin = require('clean-webpack-plugin');
并在webpack.config.js配置文件plugins内实例化CleanWebpackPlugin:
new CleanWebpackPlugin()
安装 mini-css-extract-plugin
mini-css-extract-plugin用于webpack 4对css提取,安装:
npm install mini-css-extract-plugin --save-dev
安装成功后,在webpack.config.js配置文件头部引入此插件
const MiniCssExtractPlugin =require('mini-css-extract-plugin');
并在webpack.config.js配置文件plugins内实例化MiniCssExtractPlugin:
new MiniCssExtractPlugin({
filename:"[name].css",
chunkFilename: "[id].css"
})
在webpack.config.js配置module.rules数组,添加如下内容:
{
test:/\.css$/,
use:[
{
loader:MiniCssExtractPlugin.loader,
options: {
publicPath:"/"
}
},
"css-loader"
]
}
安装 loader
对于css我们考虑全面点,安装如下loader。
css-loader:解析 CSS 文件,拿其可以作为javascript模块来加载(import,require);
style-loader:将模块的导出作为样式添加到 DOM 中(
less-loader:解析less文件;
sass-loader:编译sass到css文件;
node-sass:提供了一个nodejs编译sass到css文件,sass-loader需要此依赖;
stylus-loader:
postcss-loader:PostCSS = CSS预处理器 + CSS后处理器
autoprefixer:添加前缀。
npm install style-loader css-loader --save-dev
npm install node-sass sass-loader --save-dev
npm install --save-dev less less-loader
npm install --save-dev postcss postcss-loader autoprefixer
npm install --save-dev stylus stylus-loader
安装完成之后,我们来配置webpack.config.js:
module: {
rules: [
{
test: /\.css$/,
use:[
MiniCssExtractPlugin.loader,
"css-loader",
"postcss-loader"
]
},
{
test: /\.less$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
"postcss-loader",
"less-loader"
]
},
{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
'postcss-loader',
"sass-loader"
]
},
{
test: /\.styl$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader',
'stylus-loader'
]
}
]
},
新建项目根目录postcss.config.js用来配置postcss,其内容如下:
module.exports = {
plugins: {
autoprefixer: {}
}
}
对于其他文件(如图片)我们使用url-loader 和 file-loader。url-loader只是当文件大小低于指定的限制时,可以返回一个 DataURL
npm install --save-dev url-loader file-loader
然后在webpack.config.js里module.rules配置图片加载:
{
test: /\.(png|jpg|gif|jpeg|svg)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 1024,
name: '[name].[ext]'
}
}
]
},
使用下一代javascript代码(ES6/ES7),我们要安装babel:
npm install @babel/core babel-loader babel-preset-env --save-dev
在项目根目录新建babel.config.js用于配置balel:
module.exports = {
"presets":["env"]
};
然后在webpack.config.js里module.rules配置加载:
{
test: /\.js$/,
use: [
'babel-loader'
],
exclude: /(node_modules)/
}
webpack splitChunks
在webpack.config.js里配置代码拆分:
optimization: {
splitChunks: {
chunks: "all",
cacheGroups: {
commons: {
chunks: "initial",
name: "common",
minChunks: 2,
maxInitialRequests: 5,
minSize: 0
},
vendors: {
test: /[\\/]node_modules[\\/]/,
name: "vendor",
chunks: "all"
}
}
}
},
安装 bootstrap jquery
最新版为bootstrap 4版本。
npm install bootstrap --save
npm install jquery --save
在webpack.config.js的plugins配置jquery:
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
'window.$': 'jquery'
}),
设置路径别名
在webpack.config.js的resolve里配置alias:
alias: {
src: path.resolve(__dirname, 'src'),
public: path.resolve(__dirname, 'public')
}
安装 eslint
npm i eslint eslint-config-standard eslint-plugin-standard eslint-plugin-promise eslint-plugin-import eslint-plugin-node eslint-loader babel-eslint -D
根目录下新建.eslintrc.js并配置:
module.exports = {
root: true,
env: {
"browser": true,
"node": true,
"commonjs": true,
"es6": true,
"jquery": true
},
"extends": [
"standard",
"eslint:recommended"
],
"rules": {
'no-extra-semi':2,
'quotes':[2,'single']
},
parser: 'babel-eslint'
};
webpack.config.js里module.rules配置.js的加载:
{
test: /\.js$/,
use: [
'eslint-loader'
],
exclude: /(node_modules)/,
enforce: 'pre'
},
{
test: /\.js$/,
use: [
'babel-loader'
],
exclude: /(node_modules)/
},
同时,在webstorm里添加eslint代码检测:
测试
添加如下目录入文件:
在入口index.js里分别引入我们需要测试的文件
import 'public/css/main.scss'
import 'public/css/style.css'
import 'public/css/c.less'
import 'public/css/a.styl'
import a from 'public/js/a.js'
a();
在main.scss里,引入了bootstrap以及用于定制的custom。
测试所有样式以及js能正常运行。
webpack创建html项目,从零开始其于webpack搭建bootstrap 4项目相关推荐
- webpack创建library及从零开始发布一个npm包
最近公司有个需求,我们部门开发一个平台项目之后,其他兄弟部门开发出的插件我们可以拿来直接用,并且不需要我们再进行打包,只是做静态的文件引入,研究一波后发现,webpack创建library可以实现. ...
- vue jsx webpack报错_从零开始,使用webpack高效搭建react工作流
关注后,回复"1"获取文章案例源代码. 很多人想搭建一套属于自己的前端工作流:最开始的时候,我们的工作流萌芽是从写一个项目的时候,拷贝以前写过的一个项目文件夹改完直接使用开始的,后 ...
- 面试宝典六-- 项目部署(linux环境搭建,springboot项目部署 ,vue项目部署,nginx负载均衡)
环境准备 实际开发中,项目肯定是部署在一个个的linux系统服务器中的,学习过程中,可以在自己电脑上安装虚 拟机然后配置linux操作系统进行模拟项目部署,当然也可以花费较小费用使用各种平台提供的云服 ...
- 电商项目的介绍及其框架搭建
文章目录 电商项目的介绍及其框架搭建 一.项目介绍 二.项目架构缩略图 三.系统架构说明 四.项目搭建 4.1 技术选型 4.2 开发环境 4.3 域名 五.后台环境的搭建 5.1 创建统一的父工程: ...
- VUE利用webpack创建项目失败--离线安装webpack下载模板
@TOC无法翻墙的–离线安装webpack下载模板 最近在学习vue过程中利用webpack生成模板创建项目的时候发现一直卡在下载模板这一步,如图所示 , 查资料发现自己网无法连接git官网导致下载失 ...
- Vue - vue+webpack创建的项目打包发布至服务器,页面空白及背景图片不显示问题解决
vue+webpack创建的项目打包发布至服务器,页面空白及背景图片不显示问题解决 一. 页面显示空白 二. 背景图片不显示 一. 页面显示空白 解决方法: config > index.js ...
- 从零开始,用Webpack构建React基础教程
20170315更新 由于webpack已更新至2.0版本,许多配置项都已改变,所以可能本文有些项已经过时了 推荐大家使用facebook官方构建工具facebookincubator/create- ...
- Webpack 搭建基础 react 项目环境
现在比较火的前端框架 react 和 vue,大部分时候我们都是通过脚手架进行 搭建的,对于脚手架来说有一个很重要的打包模块 webpack,使用起来确实挺方便的.对于使用脚手架来搭建项目也有弊端,如 ...
- webpack搭建自己的项目
使用代理的方式参考地址:http://www.cnblogs.com/wangyongcun/p/7665687.html npm 常用模块 npm init 创建package.json文件 一值回 ...
最新文章
- 鸿蒙可胜安卓,【鸿蒙币谈】币圈投资中八大见顶信号,让你抓住最佳买卖机会!...
- Mahout各种推荐器的主要特点(转)
- 内存中的调用别的软件程序加密解密函数_公司加密软件哪个最好用?
- RedHat 5.4 RHCE VSFTPD学习笔记
- (一)、http原理
- dwr和ajax的区别,dwr的ajax实现
- C++是如何实现多态的
- 基于DBUtils实现数据库连接池
- Python raw_input 函数 - Python零基础入门教程
- 小说中场景的功能_《流浪地球》:从小说到电影
- Magento模块开发之数据库SQL操作方法说明
- datagrid的右键菜单
- Unity中的场景切换
- cocos2d JS 源生js实现each方法
- python可以做什么-学会Python后都能做什么?网友们的回答简直不要太厉害
- 如何查询学校联系方式?初高等学校电话查询方法
- matlab中gen2par函数,R语言中的par()函数终于明白了
- EasyCVR接入华为视频云系统查询集群编码和查询网关
- 【2014年计划】IT之路
- html 按钮id,获取当前按钮或者html的ID名称
热门文章
- 2018 年值得关注的 Web 设计趋势
- php修改新闻分类代码,新闻分类录入、显示系统_php
- ee可以有js吗 jvaa_DOTA每日节奏—EE乱选英雄被举报封号,这真的合理吗
- opencv c++ 贴图
- 点云三维重建有关原理
- module ‘mxnet.symbol‘ has no attribute ‘LSoftmax‘
- Pytorch TensorRT
- face.evoLVe.PyTorch
- python获取路径下所有图片:
- c++ mat to numpy array