一、项目准备
1.创建目录
创建webpackTest文件夹
2.初始化
创建package.json文件
npm init
3.创建业务目录
webpackTest/app
├── css/
│ ├── reset.scss
├── js/
│ ├── home/
│ │ ├── index.vue
│ ├── router/
│ │ ├── index.js
│ ├── App.vue
│ ├── main.js
│ ├── test.vue
└── views/
└── index.html
二、创建配置文件
1.创建webpack.config.js文件
2.文件配置
基础配置：
entry(入口，webpack要构建的文件)
module(配置各种loader)
plugins(插件)
output(输出)
进阶配置：
resolve(webpack怎么查询文件)
devtool(eg:sourceMap如何用)
devServer(开启服务)
//基础配置webpack.config.js
const path = require('path');
module.exports = {
entry:{
app:'./app/js/main.js'
},
module:{
loaders:[{
test: /\.html$/,
loader: 'html-loader'
},{
test:/\.vue$/,
loader:'vue-loader'
},{
test:/\.scss$/,
loader:'style-loader!css-loader!sass-loader'//webpack支持对一个文件多个loader的串行解析，解析顺序为从右到左
}]
},
plugins:[],
output:{
filename:'[name].min.js',
path:path.resolve(__dirname,'dist')//node提供的path对象,resolve表示相对路径，__dirname表示当前路径
}
}
3.安装webpack
npm install webpack -D
4.安装webpack-dev-server
webpack-dev-server 提供了一个简单的 web 服务器，并且能够实时重新加载(live reloading)。
html-webpack-plugin该插件将为你生成一个HTML5文件。
clean-webpack-plugin该插件自动清除 dev-server 生成的文件，防止开发过程中的缓存。
参考资料：webpack中文文档
//安装webpack-dev-server
npm install --save-dev webpack-dev-server
npm install html-webpack-plugin -D
npm install clean-webpack-plugin -D
//开启http服务,webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
devServer: {
contentBase: path.join(__dirname, "dist"),//静态文件的输出路径
compress: true,//整个服务开启gzip压缩
port: 9000//端口号
},
plugins: [
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
template:'./app/views/index.html'
})
]
};
5.安装loader
npm install html-loader -D//-D表示开发依赖
npm install node-sass -D//sass-loader的依赖
npm install style-loader css-loader sass-loader -D
npm install vue-loader -D
三、初始化文件
1.初始化app/css/reset.scss文件
//模拟一个reset文件
h1{
color: #f00;
.title{
color: yellow;
}
}
2.初始化app/js/home/index.vue文件
home
export default {
}
.home{
color: red;
font-size: 80px;
}
3.初始化app/js/router/index.js
需要引用vue官方router
//1.引入vue,vue-router
import Vue from 'vue';
import Router from 'vue-router';
import Home from '../home/index.vue';
//2.通过 Vue.use() 明确地安装路由功能
Vue.use(Router);
//3.
export default new Router({
routes:[{
path:'/',
name:'home',
component:Home
}]
})
4.安装vue、vue-router
npm install vue
npm install vue-router
5.初始化app/App.vue，整个app入口
export default {
name:'app'
}
6.初始化app/main.js,入口js
import Vue from 'vue';
import App from './App.vue'
import router from './router/index.js'
//声明当前不是生产环境
Vue.config.productionTip = false;
//实例化vue
new Vue({
el:"#app",
router,
components:{
App
},
template:""
})
7.初始化app/views/index.html
自定义四、Vue.js 构建版本
在 NPM 包的 dist/ 目录你将会找到很多不同的 Vue.js 构建版本。这里列出了它们之间的差别：
完整版：同时包含编译器和运行时的版本。
编译器：用来将模板字符串编译成为 JavaScript 渲染函数的代码。
运行时：用来创建 Vue 实例、渲染并处理虚拟 DOM 等的代码。基本上就是除去编译器的其它一切。
//配置完整版vue.js
module.exports = {
// ...
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js' // 用 webpack 1 时需用 'vue/dist/vue.common.js'
}
}
}
五、px2rem自适应方案
利用px2rem-loader将css、scss文件中的px转为rem，从而实现自适应。
1.安装
npm install px2rem-loader
//依赖
npm install vue-style-loader
2.配置
//webpack.config.js
module.exports = {
//...
module:{
loaders:[{
test:/\.vue$/,
loader:'vue-loader',
options: {
loaders: {
css: 'vue-style-loader!css-loader!px2rem-loader?remUnit=75&remPrecision=8',
scss: 'vue-style-loader!css-loader!px2rem-loader?remUnit=75&remPrecision=8!sass-loader' //
}
}
}
}
}
六、CSS Modules
CSS Modules是一个用于模块化和组合 CSS 的流行系统。
1.配置
//webpack.config.js
module.exports = {
//...
module:{
loaders:[{
test:/\.vue$/,
loader:'vue-loader',
options: {
cssModules: {
localIdentName: '[path][name]---[local]---[hash:base64:5]',
camelCase: true
}
}
}
}
}
2.使用
在你的 ，这将为 css-loader 打开 CSS Modules 模式，生成的 CSS 对象将为组件注入一个名叫 $style 的计算属性，你可以在你的模块中使用动态 class 绑定：
This should be red
七、提取CSS
将自动提取 *.vue 文件内的
1.安装
npm install extract-text-webpack-plugin --save-dev
2.配置
// webpack.config.js
const ExtractTextPlugin = require("extract-text-webpack-plugin")
module.exports = {
//...
module:{
loaders:[{
test:/\.vue$/,
loader:'vue-loader',
options: {
loaders: {
css: ExtractTextPlugin.extract({
use: 'css-loader!px2rem-loader?remUnit=75&remPrecision=8',
fallback: 'vue-style-loader'
}),
scss: ExtractTextPlugin.extract({
use: 'css-loader!px2rem-loader?remUnit=75&remPrecision=8!sass-loader',
fallback: 'vue-style-loader' // <- 这是vue-loader的依赖，所以如果使用npm3，则不需要显式安装
})
}
}
}
},
plugins: [
new ExtractTextPlugin("style.css")
]
}
如果觉得内容对您有帮助，请点点赞哦~~~一起学习，一起成长(#^.^#)
八、配置开发环境、生产环境
通过webpack的DefinePlugin传递参数的不同，来区别配置开发环境和生产环境。
1.配置
//webpack.config.js
const webpack = require('webpack');
module.exports = env =>{
if(!env){
env = {}//没参数时，赋值，避免undefined.
}
let plugins = [
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
template:'./app/views/index.html'
}),
];
if(env.production){
plugins.push(
//给webpack修改node的全局变量
new webpack.DefinePlugin({
'process.env':{
NODE_ENV:'production'
}
}),
new ExtractTextPlugin("style.css"),
);
}
return {
//...
module:{
loaders:[{
test:/\.vue$/,
loader:'vue-loader',
options: {
loaders: env.production?{
css: ExtractTextPlugin.extract({
use: 'css-loader!px2rem-loader?remUnit=75&remPrecision=8',
fallback: 'vue-style-loader'
}),
scss: ExtractTextPlugin.extract({
use: 'css-loader!px2rem-loader?remUnit=75&remPrecision=8!sass-loader',
fallback: 'vue-style-loader' // <- 这是vue-loader的依赖，所以如果使用npm3，则不需要显式安装
})
}:{
css:'vue-style-loader!css-loader!px2rem-loader?remUnit=75&remPrecision=8',
scss:'vue-style-loader!css-loader!px2rem-loader?remUnit=75&remPrecision=8!sass-loader'
}
}
}
},
plugins,
}
}
九、配置npm scripts
npm test
npm run watch
npm start
npm run build
//package.json
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"watch": "webpack --watch",
"start": "webpack-dev-server --open",
"build": "webpack --env.production"
},
2638
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
