resolve:模块的处理方案
resolve.alias：设置模块别名，便于我们更方便引用
通过在resolve.alias对引用的文件设置别名，对引用的模块名称进行简写和地址重定向(例:bootstrap的引用)
resolve.extensions:默认解析扩展路径，设置完成后再引入文件后可以节约后缀名 如.js .css .sass等
resolve.modules：设置解析器查找模块的目录，默认是npm使用npm下载的node_modules下
上面是我们常用的配置命令，剩下还有些额外其他的 暂时没有使用到的具体位置，所以就简单介绍一下
resolve.mainFields:解析一个目录时,配置的文件将视为文件的入口文件。
下面的代码设置在解析jquery的文件路径时，进入到jquery下的main.js 或者bower.js进行引用
resolve.descriptionFiles:描述文件，配置文件将在目录中读取
如 resolve:{descritionFiles:['package.json','bower.json']}
resolve.aliasFields：别名字段 描述文件中这些字段提供了该包的别名对照关系
resolve.enforceExtension:bool值; 是否强制使用扩展名。如果为false时候，在解析一个文件，也会尝试匹配无扩展名的文件
resolve.moduleExtensions: 模块后缀名，解析一个模块时，将会尝试附加这些后缀名
resolve.enforceModuleExtension:bool值.强制使用模块后缀名，如果值为false,在解析一个模块名时,也会尝试匹配不包含后缀名的模块。
Externals：用于设置引用外部的环境进行模块构建，有利于程序优化,注意一点 externals配置的外部变量对象一般为某一个插件提供的对象。如:jquery=&$|jQuery &swiper=&Swiper angular=&Angular
plugins:用语webpack在构建工具时的多种创建方式
webpack内置对象optimize 用来对构建的文件进行优化，提供了两个方法
optimize.uglifyJsPlugin : 压缩js文件
<monsChunkPlugin:js编译文件的模块提取(我个人认为webpack比gulp好的一块 分割代码)
ExtractTextPlugin：编译文件的css模块提取
注:大部分plugins需要额外进行下载
以上基础的的webpack属性就简单over了 &当然后面有些其他的额外例子 &供给大家学习，语言方面不是很有天分，只能靠补了 ，大家互勉
阅读(...) 评论()在 SegmentFault，解决技术问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
一线的工程师、著名开源项目的作者们，都在这里：
获取验证码
已有账号？
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
resolve: {
extensions: ['.js', '.vue', '.json'],
'~': resolve('src')
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
表示该文件路径，～／component
src目录下的component
这样就不用../../这样之类的看着好烦
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
alias是别名的意思, 在linux系统里很常见, 这里~ 代表 src目录
同步到新浪微博
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：在 SegmentFault，解决技术问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
一线的工程师、著名开源项目的作者们，都在这里：
获取验证码
已有账号？
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
alias 解析失败，找不到文件，项目情况及代码片段如下:
-webpack.config.js
-init-h5.js
-index.vue
require.ensure(['./init-h5'], function(require) {
require('./init-h5')
}, './init-h5');
init-h5.js
require('./h5')
import Vue from 'lib/vue.js'
webpack.config.js:
module.exports = {
context: path.resolve(__dirname, "./src"),
init: ['babel-polyfill', './init.js'],
path: __dirname + '/dist',
filename: '[name].js',
chunkFilename: '[name].chunk.js'
resolve: {
root: path.resolve(__dirname, "./src"),
fallback: [path.resolve(__dirname, './node_modules')],
extensions: ['', '.js', '.vue'],
tmpl: '/tmpl',
lib: '/js/lib'
resolveLoader: {
fallback: [path.join(__dirname, '../node_modules')]
enviroment:
PS D:\Projects\SVN\mosaic& cmd /c "ver"
Microsoft Windows [版本 10.0.14393]
PS D:\Projects\SVN\mosaic& node --version
PS D:\Projects\SVN\mosaic& npm --version
ERROR in ./h5.js
Module not found: Error: Cannot resolve 'file' or 'directory' /js/lib/vue.js in D:\Projects\SVN\mosaic\src
@ ./h5.js 3:11-32
ERROR in ./h5.js
Module not found: Error: Cannot resolve 'file' or 'directory' /js/lib/vue-router in D:\Projects\SVN\mosaic\src
@ ./h5.js 7:17-42
ERROR in ./h5.js
Module not found: Error: Cannot resolve 'file' or 'directory' /tmpl/index.vue in D:\Projects\SVN\mosaic\src
@ ./h5.js 20:15-40
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
alias不是这样用的，得上文件系统版的绝对路径，例如D:/XXX/XXX/XX.JS
可先用__dirname(也就是当前配置文件的绝对路径)来定个网站文件的根目录，然后再用path.resolve()来确定目标文件的绝对路径
var staticRootDir = path.resolve(__dirname, '../../'); // 项目根目录
var jqueryPath = path.resolve(staticRootDir, './static/js/jquery.js';
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：编辑模式下显示正常，打开的时候不知道为啥排版有问题。segementfalut链接在
vue-cli&2.8.1 (终端通过vue -V&可查看)
webpack&2.2.1
├── README.md
├── build
├── build.js
├── check-versions.js
├── dev-client.js
├── dev-server.js
├── utils.js
├── vue-loader.conf.js
├── webpack.base.conf.js
├── webpack.dev.conf.js
└── webpack.prod.conf.js
├── config
├── dev.env.js
├── index.js
└── prod.env.js
├── index.html
├── package.json
├── src
├── App.vue
├── assets
└── logo.png
├── components
└── Hello.vue
└── main.js
└── static
webpack配置
主要对build目录下的webpack配置做详细分析
webpack.base.conf.js
入口文件entry
app: '.src/main.js'
输出文件output
config的配置在config/index.js文件中
path: config.build.assetsRoot,
文件解析resolve
主要设置模块如何被解析。
resolve: {
extensions: ['.js', '.vue', '.json'],
模块解析module
如何处理项目不同类型的模块。
test: /\.vue$/,
注: 关于query&仅由于兼容性原因而存在。请使用&options&代替。
webpack.dev.conf.js
开发环境下的webpack配置，通过merge方法合并webpack.base.conf.js基础配置
var merge = require('webpack-merge')
var baseWebpackConfig = require('./webpack.base.conf')
module.exports = merge(baseWebpackConfig, {}）
在util.styleLoaders中的配置如下
exports.styleLoaders = function (options) {
var output = []
上面的代码中调用了exports.cssLoaders(options),用来返回针对各类型的样式文件的处理方式,具体实现如下
exports.cssLoaders = function (options) {
options = options || {}
var cssLoader = {
loader: 'css-loader',
options: {
plugins: [
new webpack.DefinePlugin({
webpack.prod.conf.js
生产环境下的webpack配置，通过merge方法合并webpack.base.conf.js基础配置
module的处理,主要是针对css的处理
同样的此处调用了utils.styleLoaders
rules: utils.styleLoaders({
sourceMap: config.build.productionSourceMap,
extract: true
输出文件output
插件plugins
var path = require('path')
var utils = require('./utils')
var webpack = require('webpack')
var config = require('../config')
var merge = require('webpack-merge')
var baseWebpackConfig = require('./webpack.base.conf')
var CopyWebpackPlugin = require('copy-webpack-plugin')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var ExtractTextPlugin = require('extract-text-webpack-plugin')
var OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
var env = config.build.env
plugins: [
new webpack.DefinePlugin({
'process.env': env
if (config.build.productionGzip) {
npm run dev
有了上面的配置之后，下面看看运行命令npm run dev发生了什么
在package.json文件中定义了dev运行的脚本
"scripts": {
"dev": "node build/dev-server.js",
"build": "node build/build.js"
当运行npm run dev命令时，实际上会运行dev-server.js文件
该文件以express作为后端框架
npm run build
由于package.json中的配置，运行此命令后会执行build.js文件
process.env.NODE_ENV = 'production'
阅读(...) 评论()}