文章目录
安装node.js
根据默认条件进行node.js的安装,安装完成之后npm也已经安装好了。
设置npm的镜像地址
npm config set registry http://registry.npm.taobao.org
npm init
https://blog.csdn.net/xiaoxingxingzai/article/details/100517851
安装webpack
-
安装全局的webpack(webpack4.0以上需要安装webpack-cli)
npm install -g webpack -
安装本地的webpack(本地:也就是你的项目路径下,首先要npm init)
npm install webpack webpack-cli --save-dev -
查看是否安装成功
webpack -v
webpack.config.js(webpack的核心配置文件)
-
webpack 能够去处理那些非 JavaScript 文件比如css文件
npm install css-loader style-loader --save-dev -
前提上在js文件中加载css文件,导致先加载js,再加载css,用户效果不好。
因此要 把css单独打包到文件里
1.安装extract-text-webpack-plugin
npm install extract-text-webpack-plugin --save-dev
2.配置文件添加对应配置
首先require-下
var ExtractTextPlugin = require(“extract-text-webpack-plugin”);
3.plugins里面添加
new ExtractTextPlugin(“styles.css”),
-
html模板的处理(<%= require(’./layout/html-head.html’)%>)
需要安装才可以使用
npm install html-loader --save-dev -
加载图片(与加载css文件类似)
npm install url-loader --save-dev -
文件的加载,用的是url-loader,所以不用安装了
-
npm install file-loader --save-dev
webpack-dev-server
npm install webpack-dev-server --save-dev
使用 webpack-dev-server
webpack-dev-server
安装全局的webpack-dev-server
npm install webpack-dev-server webpack-cli -g
启动webpack-dev-server
- webpack-dev-server 默认端口号8080
- webpack-dev-server --inline --port 8088 修改启动的端口号
报错:
npm install html-webpack-plugin --save-dev
npm install webpack-bundle-analyzer --save-dev
npm install webpack-dev-server@2.9.4 --save-dev
配置简单命令启动
npm run dev_win启动命令
============
详细配置
===================
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
// 环境变量配置,dev / online
var WEBPACK_ENV = process.env.WEBPACK_ENV || 'dev';
// 获取html-webpack-plugin参数的方法
var getHtmlConfig = function(name, title){
return {
template : './src/view/' + name + '.html', //html原始的模板
filename : 'view/' + name + '.html', //目标文件所放的位置的模板/dist/view/name.html
title : title,
inject : true,
hash : true,
chunks : ['common', name]
};
};
// webpack config
var config = {
entry: {
'common' : ['./src/page/common/index.js'],
'index' : ['./src/page/index/index.js'],
'list' : ['./src/page/list/index.js'],
'detail' : ['./src/page/detail/index.js'],
'cart' : ['./src/page/cart/index.js'],
'user-login' : ['./src/page/user-login/index.js'],
'user-register' : ['./src/page/user-register/index.js'],
'user-pass-reset' : ['./src/page/user-pass-reset/index.js'],
'user-center' : ['./src/page/user-center/index.js'],
'user-center-update': ['./src/page/user-center-update/index.js'],
'user-pass-update' : ['./src/page/user-pass-update/index.js'],
'result' : ['./src/page/result/index.js'],
},
output: {
path: './dist',
publicPath : '/dist',
filename: 'js/[name].js'
},
externals : {
'jquery' : 'window.jQuery'
},
module: {
loaders: [
{ test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader","css-loader") },
{ test: /\.(gif|png|jpg|woff|svg|eot|ttf)\??.*$/, loader: 'url-loader?limit=100&name=resource/[name].[ext]' },
{ test: /\.string$/, loader: 'html-loader'}
]
},
resolve : {
alias : {
node_modules : __dirname + '/node_modules',
util : __dirname + '/src/util',
page : __dirname + '/src/page',
service : __dirname + '/src/service',
image : __dirname + '/src/image'
}
},
plugins: [
// 独立通用模块到js/base.js
new webpack.optimize.CommonsChunkPlugin({
name : 'common',
filename : 'js/base.js'
}),
// 把css单独打包到文件里
new ExtractTextPlugin("css/[name].css"),
// html模板的处理
new HtmlWebpackPlugin(getHtmlConfig('index', '首页')),
new HtmlWebpackPlugin(getHtmlConfig('list', '商品列表页')),
new HtmlWebpackPlugin(getHtmlConfig('detail', '商品详情页')),
new HtmlWebpackPlugin(getHtmlConfig('cart', '购物车')),
new HtmlWebpackPlugin(getHtmlConfig('user-login', '用户登录')),
new HtmlWebpackPlugin(getHtmlConfig('user-register', '用户注册')),
new HtmlWebpackPlugin(getHtmlConfig('user-pass-reset', '找回密码')),
new HtmlWebpackPlugin(getHtmlConfig('user-center', '个人中心')),
new HtmlWebpackPlugin(getHtmlConfig('user-center-update', '修改个人信息')),
new HtmlWebpackPlugin(getHtmlConfig('user-pass-update', '修改密码')),
new HtmlWebpackPlugin(getHtmlConfig('result', '操作结果')),
]
};
if('dev' === WEBPACK_ENV){
config.entry.common.push('webpack-dev-server/client?http://localhost:8088/');
}
module.exports = config;