vue-cnodejs学习-目录创建环境配置

最新推荐文章于 2024-04-26 14:31:39 发布

原创最新推荐文章于 2024-04-26 14:31:39 发布 · 343 阅读

0 ·

CC 4.0 BY-SA版权

Web前端专栏收录该内容

18 篇文章

订阅专栏

本文介绍了一个基于Vue的项目结构及Webpack配置细节，包括如何通过Webpack进行资源优化、样式抽取等操作，帮助开发者更好地理解Vue项目的打包流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

├── README.md
├── dist // 项目build目录
├── index.html // 项目入口文件
├── package.json // 项目配置文件
├── src // 生产目录
│ ├── assets // css js 和图片资源
│ ├── components // 各种组件
│ ├── views // 各种页面
│ ├── vuex // vuex状态管理器
│ ├── filters.js // 各种过滤器
│ └── main.js // Webpack 预编译入口
├── server.js // webpack-dev-server服务配置
└── webpack.config.js // Webpack 配置文件

webpack.config.js

'use strict'

var path = require('path')
var webpack = require('webpack')
var ExtractTextPlugin = require('extract-text-webpack-plugin')
var isProduction = () => {
    return process.env.NODE_ENV === 'production'
}
var projectRoot = path.resolve(__dirname, './src')

// webpack插件
var plugins = [
    // 提公用js到common.js文件中
    new webpack.optimize.CommonsChunkPlugin('common.js'),
    // 将样式统一发布到style.css中
    new ExtractTextPlugin('style.css', {
        allChunks: true,
        disable: false
    }),
    // 使用 ProvidePlugin 加载使用率高的依赖库
    new webpack.ProvidePlugin({
        $: 'webpack-zepto'
    })
]
let entry = ['./src/main']
let cdnPrefix = ''
let buildPath = '/dist/'
let publishPath = cdnPrefix + buildPath
    // 生产环境js压缩和图片cdn
if (isProduction()) {
    // plugins.push(new webpack.optimize.UglifyJsPlugin());
    cdnPrefix = ''
    publishPath = cdnPrefix
}
// 编译输出路径
module.exports = {
    debug: true,
    entry: entry,
    output: {
        path: __dirname + buildPath,
        filename: 'build.js',
        publicPath: publishPath,
        chunkFilename: '[id].build.js?[chunkhash]'
    },
    module: {
        preLoaders: [{
            test: /\.vue$/,
            loader: 'eslint',
            include: projectRoot,
            exclude: /node_modules/
        }, {
            test: /\.js$/,
            loader: 'eslint',
            include: projectRoot,
            exclude: /node_modules/
        }],
        loaders: [{
            test: /\.vue$/,
            loader: 'vue-loader'
        }, {
            test: /\.scss$/,
            loader: ExtractTextPlugin.extract(
                'style-loader', 'css-loader?sourceMap!sass-loader!autoprefixer?{browsers:["last 2 version", "> 1%"]}')
        }, {
            test: /\.css$/,
            loader: ExtractTextPlugin.extract(
                'style-loader', 'css-loader?sourceMap!cssnext-loader')
        }, {
            test: /\.js$/,
            exclude: /node_modules|vue\/dist/,
            loader: 'babel'
        }, {
            test: /\.(jpg|png|gif)$/,
            loader: 'file-loader?name=images/[hash].[ext]'
        }, {
            test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
            loader: 'url-loader?limit=10000&minetype=application/font-woff'
        }, {
            test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
            loader: 'file-loader'
        }, {
            test: /\.json$/,
            loader: 'json'
        }, {
            test: /\.(html|tpl)$/,
            loader: 'html-loader'
        }]
    },
    resolve: {
        // require时省略的扩展名，如：require('module') 不需要module.js
        extension: ['', '.js'],
        // 别名
        alias: {
            filter: path.join(__dirname, 'src/filters'),
            vue: 'vue/dist/vue.js'
        }
    },
    plugins: plugins,
    devtool: '#source-map'
}