Вы понимаете проект с Vue, упакованный с WebPack4

внешний интерфейс GitHub Vue.js ESLint

Сwebpack4упакованныйvueпроект, см.vue-cliизwebpackНастроить,

Шаг за шагом вы реализуете упакованный проект Vue, каждая фиксация соответствует шагу.

гитхаб-адрес

клонировать проект

git clone git@github.com:naihe138/nvue.git

Установить зависимости

npm install or yarn

Во-первых, проект инициализации

vue-loader.vueдокумент,html-webpack-pluginПлагин для экспортаhtmlдокумент. Первый шаг очень прост, мы используемvue-loaderа такжеbabel-loaderЭто для.vueФайл запакован, всего в нем всего больше 40 строк кода, см.build/webpack.base.conf.jsКомментарии к файлу понятны.+++Указывает, что пропущен код

module.exports = {
  +++
  // 模块，loader
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        exclude: /node_modules/,
        include: resolve('src')
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        include: resolve('src')
      }
    ]
  }
  +++
}

бегатьwebpack --config build/webpack.base.conf.js

cssкsassНапример, используяmini-css-extract-pluginИзвлечение плагинаcss,использоватьurl-loaderОбрабатывать шрифты, картинки, аудио и другие ресурсы. очень простой. Следующий код,+++Указывает, что пропущен код

+++
module.exports = {
  +++
  // 模块，loader
  module: {
    rules: [
      +++
      {
        test: /\.s?css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'sass-loader'
        ]
      },
      {
        test: /.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: 'static/img/[name].[hash:7].[ext]'
        }
      }
      +++
    ]
  },
  // 插件
  plugins: [
    +++
    new MiniCssExtractPlugin({
      filename: 'static/css/[name].[hash].css',
      chunkFilename: 'static/css/[name].[hash].css'
    })
  ]
}

бегатьwebpack --config build/webpack.base.conf.js

3. Настроить горячую загрузку, прокси и другие среды разработки

пройти черезbuild/config.jsустановить конфигурацию разработки. Примечания следующим образом


const path = require('path')

module.exports = {
  dev: {
    assetsSubDirectory: 'static', // 静态文件目录
    assetsPublicPath: '/', // 相对文件路径
    proxyTable: {},
    host: 'localhost',
    port: '8000',
    autoOpenBrowser: false, // 是否自动打开浏览器
    errorOverlay: true, // 浏览器错误提示遮罩层
    notifyOnErrors: true, // 编译错误的时候通知提示，需要friendly-errors-webpack-plugin 配合
    poll: false,
    useEslint: true, // 便宜使用eslint-loader模块
    showEslintErrorsInOverlay: false, // eslint浏览器错误提示遮罩层
    devtool: 'cheap-module-eval-source-map', // Source Maps
    cssSourceMap: true, // css Source Maps
    cacheBusting: false, // vue debugg 提示
  }
}

существуетwebpack.dev.conf.jsв, черезwebpack-dev-serverПлагин тепловой перегрузки, чтобы открыть сервис, настроить CONATION COMPLE CLEAD CSS-COMBER-in Code,postcss-loader

бегатьnpm run devилиyarn devчтобы начать службу

В-четвертых, настройте среду упаковки

пройти черезbuild/config.jsустановить конфигурацию разработки. Примечания следующим образом

const path = require('path')

module.exports = {
  +++
  build: {
    // html模板
    index: path.resolve(__dirname, '../dist/index.html'),
    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    // 生产环境的souce map
    productionSourceMap: false,
    devtool: '#source-map',
    // 开启静态文件的Gzip压缩
    // 如果是true 的话  需要 npm install --save-dev compression-webpack-plugin
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],

    // 打包完成显示包大小的状态分析
    // `npm run build --report`
    bundleAnalyzerReport: process.env.npm_config_report
  }
}

бегатьnpm run buildилиyarn buildВы можете реализовать упакованные проекты vue.

5. Проверить версию, оптимизировать вывод пакета и настройки Eslint

существуетcheck-version.jsкитайское использованиеshelljsЕсть команды npm при проверке модулей,semverНомер версии семантического модуля, затемbuild.jsсливатьсяwebpack.prod.conf.js


// 检查时候有安装npm命令
if (shell.which('npm')) {
  versionRequirements.push({
    name: 'npm',
    currentVersion: exec('npm --version'),
    versionRequirement: packageConfig.engines.npm
  })
}

// 格式化输出
process.stdout.write(stats.toString({
  colors: true,
  modules: false,
  children: false,
  chunks: false,
  chunkModules: false
}) + '\n\n')



{
  test: /\.(js|vue)$/,
  loader: 'eslint-loader',
  enforce: 'pre',
  include: [resolve('src')],
  exclude: /node_modules/,
  options: {
    formatter: require('eslint-friendly-formatter'),
    emitWarning: !config.dev.showEslintErrorsInOverlay
  }
},

DllPluginа такжеDllReferencePluginЧтобы упаковать оптимизированные и неизмененные библиотеки, см.webpack.dll.conf.jsдокумент

2. Пройтиcache-loaderсделатьloaderкеш,

3. ПройтиUglifyJsPluginизparallelдля включения многопоточной упаковки


{
    test: /\.vue$/,
    loader: 'vue-loader',
    exclude: /node_modules/,
    include: resolve('src'),
    options: {
      cacheDirectory: resolve('./cache-loader'), // 缓存
      cacheIdentifier: 'cache-loader:{version} {process.env.NODE_ENV}'
    }
},
{
    test: /\.js$/,
    use: isProduction ? [
      {
        loader: 'cache-loader',
        options: {
          cacheDirectory: resolve('cache-loader'), // 缓存
        }
      },
      'babel-loader'
    ] : 'babel-loader',
    exclude: /node_modules/,
    include: resolve('src')
},

беги первымnpm run dllпотомnpm run build

Дайте это большому парню -> адрес github

Категории