webpack是前端开发必用的打包工具,在webpack下开发前端会省很多事,变得很简单.
新建项目和webpack起始简单配置
第一步,新建npm项目
mkdir web-project
cd web-project
npm init -y
第二步,初始化项目:用npm 安装 vue,webpack等等
npm i webpack vue vue-loader css-loader vue-template-compiler
第三步,新建源码放置目录
mkdir src
在src下新建一个app.vue文件,写入下面的内容:
<template>
<div id="test">{{text}}</div>
</template>
<script>
export default {
data(){
return {
text: 'abc'
}
}
}
</script>
<style>
#test{
color: red }
</style>
在项目根目录 web-project下,新建一个webpack的配置文件,随意起名为 webpack.config.js. 在里面写入下面的内容:
const path=require('path')
module.exports = {
entry: path.join(__dirname,"src/index.js"),
output: {
filename: "bundle.js",
path: path.join(__dirname,'dist')
},
module: {
rules: [
{
test:/.vue$/,
loader: "vue-loader"
}
]
}
}
在src目录下新建一个文件index.js,并写入下面的内容:
import Vue from 'vue'
import App from './app.vue'
const root=document.createElement('div')
document.body.appendChild(root)
new Vue({
render:(h) => h(App)
}).$mount(root)
修改package.json
在package.json 里面找到"scripts": { "test": "echo \"Error: no test specified\" && exit 1" }
往”scriptes”添加一个脚本,修改后是这样的:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config webpack.config.js"
}
第一次编译
打开终端,在项目根目录下运行
npm run build
在根目录下能看到多了一个 dist目录及其内bundle.js.
webpack配置项目加载各种静态资源及css预处理器
修改 webpack.config.js ,在module下增加几个rules,修改后是下面这样:
...
module: {
rules: [
{
test:/\.vue$/,
loader: "vue-loader"
},
{
test:/\.css$/,
use:[
'style-loader',
'css-loader'
]
},
{
test:/\.(gif|jpg|png|svg)$/,
use:[
{
loader: "url-loader",
options: {
limit:1024,
name:'[name]-aaa.[ext]'
}
}
]
}
]
}
...
用 npm安装上面rules配置的loader:
npm i style-loader url-loader file-loader
现在就可以直接去在js中 import 非 js 的内容了.
js import css 和 图片
现在做一个简单的在js代码中引入 css 和 图片.
在根目录下新建 目录 assets, 在其下新建目录styles,在其下新建样式文件 test.css,内容如下:
body{
color: red;
background-image: url("../images/bg.jpg");
}
然后在index.js中引入 test.css:
import './assets/styles/test.css'
这样,等编译后,test.css的内容就会以js的形式出现在bundle.js中,长得就像这样:
exports.push([module.i, "body{\n color: red;\n background-image: url(" + escape(__webpack_require__(4)) + ");\n}", ""]);
在test.css中的背景图片,会用js以base64编码的方式,写入到bundle.js中.
现在来看看在js中引入 图片
在assets下新建目录images,并放入一张图片,这里将其随意取名为bg.jpg. 然后就可以在index.js中引入这张图片,就像下面这样:
import './assets/images/bg.jpg'
运行npm run build
编译后,就能在dist目录下看到这张图片,说明编译已经通过了.
webpack 配置 css 预处理器 stylus
在webpack.config.js文件的rules下,加入新的规则块:
{
test:/\.styl/,
use:[
'style-loader',
'css-loader',
'stylus-loader'
]
}
现在完整的rules就像这样了:
...
rules: [
{
test:/\.vue$/,
loader: "vue-loader"
},
{
test:/\.css$/,
use:[
'style-loader',
'css-loader'
]
},
{
test:/\.(gif|jpg|png|svg)$/,
use:[
{
loader: "url-loader",
options: {
limit:1024,
name:'[name]-aaa.[ext]'
}
}
]
},
{
test:/\.styl/,
use:[
'style-loader',
'css-loader',
'stylus-loader'
]
}
]
...
安装 stylus-loader:
npm i stylus-loader stylus
现在就可以用stylus来写css了.
同样的,其他的css预处理器也可以这样简单的配置,相应的loader都能在github上面找到.
webpack的loader是一层一层往上扔的,列如:
test:/\.styl/,
use:[
'style-loader',
'css-loader',
'stylus-loader'
]
这里就是 stylus-loader处理完,然后丢给css-loader,然后css-loader处理完又丢给上面的style-loader.
webpack-dev-server的配置和使用
安装一个包
npm i webpack-dev-server
在package.json 里面找到"scripts": {... ... }
往”scriptes”里添加一个脚本,修改后是这样的:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config webpack.config.js",
"dev": "webpack-dev-server --config webpack.config.js"
},
安装一个包npm i cross-env
,这个包用于方便的设置环境变量 .
把刚刚在package.json中写的脚本命名加上环境变量,就像这样子的:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "cross-env NODE_ENV=production webpack --config webpack.config.js",
"dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js"
},
然后修改一下webpack.config.js.修改完后是这个样子:
const path=require('path')
const HTMLPlugin = require('html-webpack-plugin')
const webpack = require('webpack')
const isDev = process.env.NODE_ENV === 'development'
const config = {
target:'web',
entry: path.join(__dirname,"src/index.js"),
output: {
filename: "bundle.js",
path: path.join(__dirname,'dist')
},
module: {
rules: [
{
test:/\.vue$/,
loader: "vue-loader"
},
{
test:/\.css$/,
use:[
'style-loader',
'css-loader'
]
},
{
test:/\.(gif|jpg|png|svg)$/,
use:[
{
loader: "url-loader",
options: {
limit:1024,
name:'[name]-aaa.[ext]'
}
}
]
},
{
test:/\.styl/,
use:[
'style-loader',
'css-loader',
'stylus-loader'
]
}
]
},
plugins: [
//vue等常用到
new webpack.DefinePlugin({
'process.env':{
//单引号里面是双引号;
//在这里定义了的 isDev在代码里面可以引用
NODE_ENV:isDev ? '"development"' : '"production"'
}
}),
new HTMLPlugin()
]
}
if(isDev){
//设置浏览器调试代码
config.devtool = '#cheap-module-eval-source-map'
// webpack2.0 才有的devServer配置
config.devServer = {
port:'8000',
host:'0.0.0.0',
overlay:{
//错误显示在网页上
errors:true,
},
//启动完后自动打开浏览器
open:true,
}
}
module.exports = config
现在,运行 npm run dev
,在浏览器中输入 http://127.0.0.1:8000
已经可以看到一个简单的vue写的页面了.
配置vue开发配置
安装几个包:
npm i postcss-loader autoprefixer babel-loader babel-core
npm i babel-preset-env babel-plugin-transform-vue-jsx babel-helper-vue-jsx-merge-props babel-plugin-syntax-jsx
在项目根目录下创建两个文件:
” .bablerc ” 和 ” postcss.config.js ” ,这两个分别是bable和postcss的配置文件.
下面是 ” .bablerc “文件的内容:
{
"presets": [
"env"
],
"plugins": [
"transform-vue-jsx"
]
}
这个文件配置了让vue支持jsx. jsx可以把HTML写在js里面.jsx里面不能写样式,jsx用js写html,可以做运算之类的,更加的灵活.和vue文件相比,各有各的好处.vue文件结构清晰.
下面是postcss.config.js 的内容:
const autoprefixer = require('autoprefixer')
module.exports = {
plugins: [
//后处理css代码,针对一些需要加浏览器前缀的css,autoprefixer可以自动处理.
autoprefixer()
]
}
这个文件配置了css后处理.
现在,vue的相关配置就搞定了.接下来可以开始写界面相关的代码了.
在vue中使用材料设计
vuematerial是一个在vue中使用材料设计的开源库,官网是 https://vuematerial.io/getting-started .
安装:
npm install vue-material@beta --save
webpack正式环境打包优化
安装下面的包:
npm i extract-text-webpack-plugin